Mobile Styling is Wonky

[noslenwerd]

Hi there.

Please see the image below, as well as a link to my site here: http://www.theyardpgh.com/

I can’t quite get my divs lined up when you condense the browser to the size of a mobile viewer… Been tweaking the css for an hour with no luck. Any ideas?

[RyanReese]

Those images are pushing outside the container. To get them to resize accordingly, your img{} needs max-width:100%. That will allow the images to resize.

From there, please describe what sort of end result you would like.

[ralphm]

You have a lot of fixed width setting in there at various breakpoints, which makes things a little difficult. The first thing I would suggest here is to take a step back and think carefully about how you want your layout to reposnd to all the various widths, and establish an overall game plan. For example, I’d say at a certain point, consider stacking and centering all the elements in a column, setting widths to 100% or similar. Then you don’t have to chase down each element of the layout all the way down through the breakpoints, and it will look better, too (imho, anyhow!).

[noslenwerd]

ralphm,

Definitely agree… I took a framework from a prior responsive site I created and it is becoming a bit cumbersome trying to edit the various media sizes.

With all that being said, my two main questions at this point are

• I set the images to max-width:100%, and they aren’t resizing correctly @media less than 400px
• The second div in the screenshot above lines up correctly, but i can’t find the css that controls the first div (would like them to line up next to each other).

Thanks again for the help

[DaveMaxwell]

part of the problem is this css rule. It’s setting a different margin for the first child (which is the first div)

.span12:first-child {
  margin-left: 0;
}

Removing this will fix the alignment issue with the two divs, but causes some other display issues (and I’m assuming display issues elsewhere)

The second, which may be an artifact of the trying to figure this out, is the two divs are running under two different classes, which have different rules, so they’ll display differently.