Container spacing moves in mobile

[rnedelkow]

My site looks fine on the desktop but on mobile, the body moves slightly to the left and looks misaligned just under the top blue row. How can I get the correct spacing on mobile?

[Wayne Luke]

What kind of device and browser are you using?

[In Omnibus]

It looks as though you're viewing the site on the desktop theme from the mobile device. Correct me if I'm wrong about that. The optimal solution would be to have a mobile theme and to remove the padding from the mobile theme. Removing the padding from the desktop theme would possibly fix the mobile theme but would cause issues with the desktop theme.

[Wayne Luke]

It looks as though you're viewing the site on the desktop theme from the mobile device. Correct me if I'm wrong about that. The optimal solution would be to have a mobile theme and to remove the padding from the mobile theme. Removing the padding from the desktop theme would possibly fix the mobile theme but would cause issues with the desktop theme.

There is no such thing as a "Mobile Theme" in vBulletin 5. The same Style will be used for Phones, Tablets, and larger devices.

[In Omnibus]

I can't reproduce this using the default vB5 theme and any browser on an iPhone so I assumed (perhaps incorrectly) that it was a custom theme.

[rnedelkow]

Hi Wayne, I'm on android using Chrome but Firefox displays the same thing. It also reproduces if I resize the tab on desktop.

[Wayne Luke]

When you get to phone size, the gray noise background should be removed from display. Did you change the width and padding of the main page? Could be a bug related to that.

[rnedelkow]

I did change the stylevars for Wrapper Max Width and Wrapper Min Width both to 90%. Also the Wrapper Margin to Top= 0px, Right=65px, Bottom=0px, Left 65px. Use the 'top' value for all sides set to "Yes".

[In Omnibus]

If you reset the wrapper margins to 0 top, 0 bottom, 20 left, 20 right does it resolve the issue? The default wrapper max width is 1200px. The default wrapper min width is 320px. The default wrapper width is 100%. You may need to reset one or more of these.

[rnedelkow]

Thanks for the suggestion. I tried that but it still shifts the cells to the left on mobile. I think it has to do with the breadcrumbs not being displayed on mobile and leaving the <td> visible.

[Glenn Vergara]

Cross-posted and solved here.

[rnedelkow]

Glenn, you rock! Thank you for sharing that.