Grow your CSS skills. Land your dream job.

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

  • # December 29, 2012 at 6:09 pm

    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

    # December 29, 2012 at 7:19 pm

    The problem is the .span4 containers are coded at 370px width + 30px margin left, so that is 400px per box, but the total width of the container is 940px. So simply the boxes don’t fit and drop down.

    Just adjust the boxes down in size, I don’t know much about Bootstrap because I avoid it, so not sure if you need a broad fix or a targeted (page specific) one. :P

    # December 29, 2012 at 8:08 pm

    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.

    # December 29, 2012 at 8:57 pm

    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.

    # December 29, 2012 at 9:51 pm

    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;
    }

    }

    # December 29, 2012 at 10:14 pm

    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.

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".