CODEWITHSUNDEEP
csstwitter-bootstrapresponsive-designresolutionscreen-resolution
Evan
Evan

Reputation: 665

Image stops scaling with bootstrap-responsive.css at the smallest level

I'm making my first website using Twitter Bootstrap, and am trying to understand why the logo image on my page stops scaling and jumps in size once the screen size reaches a small enough size.

The current behavior makes the site look horrendous on the iPhone.

The image file itself is a 200 x 500 px .gif

Here is a jsfiddle with the code in it: http://www.jsfiddle.net/eugip9/uyGH9

And here is the code from the div it's in:

<div class="row">
    <div class="span1">
    <img src="./HomePage/logo-02.gif" center alt>
    </div>
    <div style="text-align:left;padding-top: 5em;text-indent: 5em;"; class="span11">
        <h1>Site Title</h1>
    </div>
</div>

The image scales well down to a point, but once the screen gets small enough the image goes back to 200px x 500px

I'm using the default bootstrap-responsive.css

Upvotes: 1

Views: 3865

Answers (1)

Pigueiras
Pigueiras

Reputation: 19356

Every span has a 100% width when the screen is less than 767px. So, due to every image of the theme has a max-width: 100% property, you image is resizing when the screen is less than 767px.

I recommend you to resize the image to the desirable width with Photoshop (or similar). It's not always a good idea to resize images with CSS. If you don't want to do that, just put a id to the image and then put a max-width: 64px to that logo.

Upvotes: 2

Related Questions