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] Strange margin right-side when mobile site is activated (http://forum.bytesforall.com/showthread.php?t=21957)

vandermark Apr 2, 2014 07:19 AM

[SOLVED] Strange margin right-side when mobile site is activated
 
I have switched to Montezuma for its responsive design. I really like it a lot. I have one strange issue which I cant resolve through inspecting elements:

When the mobile site is activated (by phone or decreasing browser screen) a strange margin is activated on the right side of my site. I have tried to see which css is causing this but I cant find it.

site: www.bartvandermark.nl

See below for some screenshots:

https://dl.dropboxusercontent.com/u/...4/screen01.PNG
https://dl.dropboxusercontent.com/u/...4/screen02.png

juggledad Apr 2, 2014 07:32 AM

what browser are you using?
Do you see the same thing in other browsers?
Which did you test?

vandermark Apr 2, 2014 07:39 AM

I tested in Chrome desktop logged in, IE9 not logged in and Chrome for android on android phone. All showed the strange margin on the right when mobile site (with menu) activated.

I cannot find which css is causing this, can you?

lmilesw Apr 2, 2014 08:10 AM

Do you get the same results if you uncheck "Show Toolbar when viewing site" in your user settings? This is just a thought as that has caused some "issues" for me in the past.

vandermark Apr 2, 2014 08:16 AM

Turning off toolbar did the trick for the pc browsers. On my phone I still have the margin on the right side: that's is just the most annoying one...

juggledad Apr 2, 2014 08:28 AM

So is there a margin on BOTH sides?

vandermark Apr 2, 2014 08:34 AM

No only on the right side, see screen shot below where I colored the wrong margin red:

https://dl.dropboxusercontent.com/u/...4/screen03.png

lmilesw Apr 2, 2014 08:54 AM

Try adding this to the various CSS section.
HTML Code:

html {
    overflow: hidden;
}


juggledad Apr 2, 2014 09:03 AM

change the last part of this CSS - it's in the breadcrumb.css
HTML Code:

#breadcrumbs1 {
    padding: 5px 0 5px 30px;
}

The 30px is the cause

vandermark Apr 2, 2014 11:19 AM

Tx so much juggledad! That really helped.

What i dont understand: the 30px in that css line is for left margin right? How did it result in the right margin??

juggledad Apr 2, 2014 04:15 PM

It is pushing the element to the right which pushes it outside the parent element which was defined as 100%.

vandermark Apr 3, 2014 12:54 AM

Thanks again juggledad and lmilesw for your quick and supportive replies!


All times are GMT -6. The time now is 08:48 AM.

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