Responsive Design Help

HTML & CSS
1

I am making a site and trying to incorporate responsive design for the first time.

It functions pretty much the way I hoped it would with one exception. When I look at the site in various responsive layouts it has an awkward scroll bar that appears at about 960px browser width and goes away at 720px. The effect occurs on single column pages as well as the two column pages.

This makes the site look awkward on tablets in both portrait and landscape

I’m thinking that I need to add or modify the @media screen queries to make this go away but I’m not sure if that’s really the issue. I’ve tried a bunch of experimenting but I seem to be hopelessly spinning my wheel;s.

Any advice or suggestions most appreciated.

2

From a quick glance, I see this:

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
.p7CCM01 {max-width: [COLOR="#FF0000"]960px[/COLOR] !important; min-width: 0px !important;}
	body { margin: 8px !important; min-width: 0px !important;}
}

Obviously, when the viewport is narrower than 960px, you don’t want that width to apply, but you still have this operating:

media="all"
.p7ccm01-fixed-960 {
width: 960px;
}

I would remove that from your general CSS styles and only place it where you actually want it (that is, on viewports 960px wide or greater—so put it in an @media rule for that situation.

More generally, you’d want something more like this:

media="all"
.p7ccm01-fixed-960 {
width: 100%;
}
3

Ralph, thank you very much for your helpful reply!

In the @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) - The max-width: 960px was supposed to be 768px, I had changed it to 960 when I was hacking around trying to get the configuration correct. I have changed it back to 768. Thanks for bringing that to my attention (doesn’t seem to have any effect on the problem I am trying to solve).

I did not put in a new @media rule for viewports greater than 960px. Not sure I understand how that would help but I’m going to experiment with that.

I did try, per your suggestion, changing width from 960px to 100% in

media=“all”
.p7ccm01-fixed-960 {
width: 100%;
}

That gets rid of the horiz scroll problem, but it causes all the content to be left aligned/not centered in the browser window. I tried adding margins: 0 auto 0 auto; to the rule above but that did not center the columns.

clearly I am lacking a good understanding of how to use the @media rules and how responsive design is implemented. I am determined to gain a complete understanding and this is part of the process. Any other help or advice you can offer will be very much appreciated.

Thanks again!

4

Set the max-width as 960px.

e.g.


.p7ccm01-fixed-960 {
    max-width: 960px;
    width: auto;
}

That will allow the page to get smaller but get no bigger than 960px and thus will remain centred at wider viewports.

5

Thank you Paul! that was what I was missing - seems obvious now. Thank you both for your help.

Very much appreciated!