Image not resizing as it should in responsive design

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

Post Reply
User avatar
barb woolums
Forum Contributor
Posts: 134
Joined: Sun Feb 08, 2009 9:52 pm

Image not resizing as it should in responsive design

Post by barb woolums »

I am using twitter bootstrap 3 to create a responsive 2 column layout. The left column is static width and the right column is responsive. This all works fine except for an image at the bottom of the right column which is not resizing with the rest of the column content even though it has class img-responsive

you can see what I mean here

http://webrecipemanager.com
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Re: Image not resizing as it should in responsive design

Post by pickle »

I'm getting an endless loop error.

One thing you can try is right click and examine the element (either in Chrome or Firefox). Both of those browsers have a "Computed" tab, so you can see what the actual properties of the element are, after all the myriad rules have been applied. Bootstrap has some weird specificity some times, so it may be that the rules aren't being applied, or are being overwritten.
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
User avatar
barb woolums
Forum Contributor
Posts: 134
Joined: Sun Feb 08, 2009 9:52 pm

Re: Image not resizing as it should in responsive design

Post by barb woolums »

Endless loop - I don't see that

I did what you suggested and the image is too big - it seems it is using max-width of the whole page instead of the containing div
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Re: Image not resizing as it should in responsive design

Post by pickle »

re: Endless loop - There was probably a DNS issue when I looked at it last.

As you suggested, the problem is that the parent of your image, ".container" is the full width of the page. You've used a common design pattern of having the .sidebar floated to the left, and have the content of the page wrap around it. That works great for text. Unfortunately, the dimensions of .container don't accurately reflect the width of the text, and remain the full width.

Adding .img-responsive to your image gives it a max-width of 100%. This means the image will grow to 100% of .container, or the width of the image - whichever is smaller. In your case, the image is 800px wide, and the container is wider, so the image stops growing when it gets to 800px. If you shrink your monitor down really far, you'll see that eventually the image does start resizing, once the width of .container gets below 800px.

My suggestion is to add ".col-xs-4" to your .sidebar element, and ".col-xs-8" to your '.container' element. This will apply the Bootstrap grid to those elements, but only because you've already wrapped them with an element with the required .row class. Applying the grid will make the .container element have a set width, and the image will resize rather than dropping down below the sidebar.

A couple notes of caution though:

1) ".container" is class used in Bootstrap for wrapping the entirety of a page's content. Putting it inside a .row element shouldn't cause a lot of problems, but it might.
2) The Bootstrap grid is fully responsive, so when the screen gets small enough, it re-arranges things quite a bit to fit a phone's screen. Consequently, you may need to re-think your site's layout a little.
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
User avatar
barb woolums
Forum Contributor
Posts: 134
Joined: Sun Feb 08, 2009 9:52 pm

Re: Image not resizing as it should in responsive design

Post by barb woolums »

That works better thanks.
Post Reply