CODEWITHSUNDEEP
csstwitter-bootstrapresponsive-design
Paul Hiles
Paul Hiles

Reputation: 9778

forcing responsive image to resize instead of paragraph on small screens

Sure this is an easy one but cannot get it working.

See http://jsfiddle.net/2X6pJ/

<div class="media">
    <a class="pull-left" href="#">
        <img src="http://placehold.it/250x250"/>
    </a>
    <div class="media-body">
        <h3 class="media-heading">Hello</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
</div>

Just want the paragraph of text (well div.media-body) to always be at least 50% of screen width so on smaller screens, the image would get smaller. Adding a min-width just seems to force text below image.

I am using twitter bootstrap so the responsive image stuff is already set up. The problem is that it does not come into effect until the image is the only thing left and all the text has moved beneath (when I resize panel).

Upvotes: 0

Views: 3034

Answers (1)

polikin
polikin

Reputation: 304

If you want to resize the image when the div is resized, try this:

img { display: block; max-width: 100%; }

Here a quick example: http://jsfiddle.net/2X6pJ/8/

Upvotes: 1

Related Questions