hello,

when i look at the montezuma theme on my iPhone, there is a ~20px margin on the right side of the entire content container. is there a way to get rid of that so that it displays full width on the phone?

i found these two threads that have the similar problem
Breadcrumbs - Not 100% width when loaded on iPhone

[SOLVED] Front Page width on mobile

but i couldn't figure it out. here's a screenshot, i colored it so i can see the edges of the boxes.



much thanks.

What's the URL of your site?

I had the same problem on one of my Montezuma sites, but not the other. It was a 10px margin on the far right. It took me a while to figure out what the problem was (I couldn't figure it out right away using Firebug), but let me explain how I narrowed it down so I could eventually figure it out. Maybe it will help you figure out where your problem is.

I started with index.php and copied all the code into my text editor for backup.

Then I deleted out everything except for the get_header and get_footer calls (i.e., I deleted out all the post content), saved it, and took a look. I still had the problem.

I then deleted out the get_header call, leaving just the footer, and the problem went away.

I put the get_header call back in and removed the get_footer, and I saw the problem again.

I put everything back in except the get_header call, and the problem went away. So I had narrowed the problem down to something in my header.

In my header.php, I have four DIVs, one for the site title, one for a slider, one for the site description, and the last for the menu navigation (the call to wp_nav_menu). Each one of the DIVs has a class of col12, meaning they all span the entire width of the page. Similar to what I did with index.php, I cleared out all the DIVs except for one in header.php (make sure you copy the original somewhere), rotating between the four DIVs. In that mannner, I was able to narrow it down to my menu bar.

After some trial & error, I finally was able to pinpoint the problem down to a margin definition that I had set in my menus_menu1.css file for #menu1-wrapper.

So, as as I said earlier, your particular problem might be different. Perhaps it's a widget you have in your sidebar. But you should be able to isolate where the problem is by following the steps above.

thanks for the tip. i'll try it and let you know.

i've been viewing a bunch of the showing off sites on the iphone and most of them have that right gutter problem. i guess people don't QA on smaller devices.

thanks again for your insight. much appreciated.

okay, you totally helped me out.

turning things off and on, i figured out breadcrumbs was too wide. in various.css i put in:

@media only screen and (max-width: 767px) {
	nav#breadcrumbs1 {
		width: 90%;
	}
}

thanks so much for your help.