Bootstrap Response CSS File – Need to get rid of extra padding around thumbnails

[DesignLady94]

I am using a fixed layout in Bootstrap (max-width: 940px). However, when the browser is stretched horizontally, a huge padding or margin is added to my thumbnails, causing them to drop down rather than staying in a row of 3. I figure this has to be coded in the boostrap-responsive.css file but am not seeing where or how to get rid of it.

Thanks!

debbierking.com/bootstrap

[davidlab.be]

Go to your bootstrap-responsive.css file and comment out all the code that belongs with @media (min-width: 1200px){}.
If you are using less then find the right .less file and void it from compiling.

[DesignLady94]

Thank you Scottnix and SpringLab! I used the second fix and it seems to have solved that problem.

However, I’m having a related problem with the nav bar image dropping down, the logo jumping up, and the nav bar no longer being fixed when I downsize the browser horizontally. Plus the collapse icon isn’t working. Any ideas? I think part of the problem is that I am going from a fixed layout to a responsive (fluid) one.

Scottnix…why is it that you avoid Bootstrap? It was strongly recommended that I learn it during a recent interview.

I haven’t learned how to use LESS yet…am trying to conquer Bootstrap first.

[DesignLady94]

Unfortunately, now, when I comment out the code for (min-width: 1200px), that also eliminates margins for narrower browser sizes and the thumbnails (circles) overlap. I tried adding this but it didn’t work:

@media (max-width: 1199px) {

[class*=”span”] {
margin-left: 30px;
}

}

[davidlab.be]

Why are you not making it responsive? And for that matter why don’t you go to boostrap and customize the stylesheet you need as it seems like you need to eliminate a lot of the css you have. However, I strongly think you need to make it responsive. A non-responsive site is a thing of the past.

[Author]

Posts