PHP Developers Network

A community of PHP developers offering assistance, advice, discussion, and friendship.
 
Loading
It is currently Tue Sep 29, 2020 4:12 pm

All times are UTC - 5 hours




Post new topic Reply to topic  [ 5 posts ] 
Author Message
PostPosted: Mon Apr 28, 2014 1:09 am 
Offline
Forum Contributor
User avatar

Joined: Sun Feb 08, 2009 10:52 pm
Posts: 134
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



Top
 Profile  
 
PostPosted: Mon Apr 28, 2014 4:05 pm 
Offline
Briney Mod
User avatar

Joined: Mon Jan 19, 2004 7:11 pm
Posts: 6446
Location: 53.01N x 112.48W
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.


Top
 Profile  
 
PostPosted: Fri May 02, 2014 2:23 am 
Offline
Forum Contributor
User avatar

Joined: Sun Feb 08, 2009 10:52 pm
Posts: 134
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


Top
 Profile  
 
PostPosted: Mon May 05, 2014 12:01 pm 
Offline
Briney Mod
User avatar

Joined: Mon Jan 19, 2004 7:11 pm
Posts: 6446
Location: 53.01N x 112.48W
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.


Top
 Profile  
 
PostPosted: Mon May 05, 2014 7:51 pm 
Offline
Forum Contributor
User avatar

Joined: Sun Feb 08, 2009 10:52 pm
Posts: 134
That works better thanks.


Top
 Profile  
 
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 5 posts ] 

All times are UTC - 5 hours


Who is online

Users browsing this forum: No registered users and 9 guests


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Jump to:  
Powered by phpBB® Forum Software © phpBB Group