CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
Mohammad Areeb Siddiqui
Mohammad Areeb Siddiqui

Reputation: 10179

Bootstrap - Shrink image size as screen shrinks

I have a simple layout created to show a timer. It's a div with 6 images. I just want to shrink the size of the images as the screen size shrinks. The images are in a straight line always. I tried this:

This is how it is @ 1280x800: enter image description here

<div class="row" id="timer-wrap" style="margin-top: 50px;">
    <img class="pull-left" src="img/left_arrow.png" id="left_arrow" />
    <div id="timer" class="text-center">
        <div class="col-xs-1 col-sm-2 col-lg-2">
            <img src="img/timer/days.png" width="147px" height="136px" />
        </div>
        <div class="col-xs-1 col-sm-2 col-lg-2">
            <img src="img/timer/hours.png" width="147px" height="136px"  />
        </div>
        <div class="col-xs-1 col-sm-2 col-lg-2">
            <img src="img/timer/minutes.png" width="147px" height="136px"  />
        </div>
        <div class="col-xs-1 col-sm-2 col-lg-2">
            <img src="img/timer/seconds.png" width="147px" height="136px"  />
        </div>
    </div>
    <img class="pull-right" src="img/right_arrow.png" id="right_arrow" />
</div>

And this is the CSS:

#left_arrow, #right_arrow{
    position:absolute;
    top:50%;
    -webkit-transform:translateY(-50%);
    -moz-transform:translateY(-50%);
    -ms-transform:translateY(-50%);
    transform:translateY(-50%);
}

#left_arrow {
    left: 0;
}

#right_arrow {
    right: 0;
}

#timer-wrap {
    position: relative;
}

#timer img {
    padding: 10px;
    min-width: 121px;
    max-width: 100%;
}

But it's not working. It doesn't shrinks according to screen size. What can I do to achieve the result? Thanks.

Upvotes: 3

Views: 10445

Answers (1)

calvin
calvin

Reputation: 479

The edited fiddle is this one.

Okay, first, we should nest the .col-s directly under the .row:

<div id="timer-wrap" style="margin-top: 50px;"><!-- `class="row"` removed -->
    <img class="pull-left" src="img/left_arrow.png" id="left_arrow" />
    <div id="timer" class="text-center">
        <div class="row"><!-- added this `div` -->
...

Then we need to fix the columnizing. I'm assuming you want them centered in the page and each at most 1/4 of the screen (so they can all four fit in a row). So we want each to span as many as 3 of Bootstrap's columns, i.e. .col-xs-3. We also need to remove the height and width attributes from the img tags, as they're trumping your max-width: 100% right now. So the adjusted columns are like this:

            <div class="col-xs-3">
                <img src="img/timer/days.png" />
            </div>
            <div class="col-xs-3">
                <img src="img/timer/hours.png" />
            </div>
            <div class="col-xs-3">
                <img src="img/timer/minutes.png" />
            </div>
            <div class="col-xs-3">
                <img src="img/timer/seconds.png" />
            </div>

Since Bootstrap's grid is mobile-first, the larger screens will inherit the 3-column size unless you override them.

But then the images overlap the arrow images. So to rectify that, we're going to limit #timer's width and center it within #timer-wrap, like so:

#timer {
    width: 80%; /* or whatever works */
    margin: 0 auto;
}

Now, at the moment, these images are getting super small. Bootstrap's grid already has gutter padding, so you may want to remove the padding: 10px; that you have on #timer img at the moment.

Messing with the width of the #timer should help you get the look you want. You may want to adjust the layout for really really narrow screens, too.

Let me know what else you need and I'll keep the answer updated.

Upvotes: 2

Related Questions