Website not displaying correctly on mobile devices

[Pamela Cather]

Thought I was done with my website until I got my new iphone. It does not display well at all on a mobile device. http://www.reflections-etc.com The right hand side is missing.

My other site http://www.efreebn.com (using the Gallery Theme) displays very well; it’s not a mobile site just a mini version of the web-site.

I’m sure I did something when editing the css that made it this way. Can you suggest what part of the css I should be looking at?

Thanks
Pamela

[Bill Robbins]

Pamela,

It looks like we need to make your slideshow responsive to fit. Here’s what I’d suggest adding to your style.css file:

@media only screen and (max-width: 991px) {
	
	#rotator {
		max-width: 100%;
		height: auto;
	}
		
}

See if that doesn’t help get things going in the right direction,
Bill

[Pamela Cather]

Well it sort of fixed the homepage, except there’s a hugh gap between the slideshow and the text. All the other pages are still messed up.

Just when I think I know what I’m doing I realize how little I still know. Thanks for your help. Any more suggestions?

[Bill Robbins]

Gotcha,

To be honest, I didn’t look beyond your homepage.

With a responsive design, any layout changes will most likely require adjustments to the media queries section in order for everything to continue to work.

The media queries section of the style.css file starts with this line:

@media only screen and (max-width: 991px) {

Essentially what that tells the browsers is that any rules between its brackets are to override the other styles when the conditions of the query are true. In this case when the browser is 991 pixels wide or smaller, everything in those brackets are in effect. Larger than that and the rules are ignored.

So if you add image like on your about page, it will be affected as the screen size shrinks because the overall content container (.wrap) gets reduced in size from 960 pixels wide to 750 pixels wide.

You’ll want to make it so your image either shifts above or below your content in the smaller screen sizes.

I hope that helps. The responsive elements do add an extra layer of complexity to layout modifications, but you’ve already got the tools you need to make those changes so you’re in good shape.

If you have trouble, let me know,
Bill

[Author]

Posts