Wordpress Themes - WP Forum at BFA

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)
-   Montezuma Theme (http://forum.bytesforall.com/forumdisplay.php?f=53)
-   -   [SOLVED] montezuma not displaying properly on iphone (http://forum.bytesforall.com/showthread.php?t=20471)

eddiefrankie Jun 8, 2013 02:56 PM

[SOLVED] montezuma not displaying properly on iphone

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.

CrouchingBruin Jun 8, 2013 11:11 PM

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.

eddiefrankie Jun 10, 2013 04:00 PM

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.

eddiefrankie Jun 11, 2013 03:14 PM

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.

All times are GMT -6. The time now is 05:21 AM.

Powered by vBulletin® Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.