Problems on Ipad and Tablets

[Cfleet1]

So i was told by a member of my forum that my site is really visually messed up on Ipad. Its ok on mobile phones. I do have one member saying hes having issues on his new Samsung phone.

But it would seem that tablets are messed up for my site. If i turn the tablet to the wider screen mode its ok. But the narrow view looks like this. Any ideas?

[In Omnibus]

Is that a custom theme? It appears to be missing a media query breakpoint for 1024px. The iPad requires a breakpoint at 768px min and 1024px max width.

[Cfleet1]

Is that a custom theme? It appears to be missing a media query breakpoint for 1024px. The iPad requires a breakpoint at 768px min and 1024px max width.

Oh yeah it is. I have tons of cash in this forum. lol And it always needs something. Is that an easy fix?

[In Omnibus]

Oh yeah it is. I have tons of cash in this forum. lol And it always needs something. Is that an easy fix?

I can't say for certain. Your theme designer should have included it.

If the theme uses the default styling you could try adding the following to your css_additional.css template:

media only screen and (max-width:1024px) {
#main-navbar .main-nav li,
#sitebuilder-wrapper,
.config-site-menu-item {
display:none;
}
#main-navbar .main-nav li.lnkAdminCP {
display:inline-block;
}
}

The >768px media query breakpoint already exists in the default theme.

[Cfleet1]

I can't say for certain. Your theme designer should have included it.

If the theme uses the default styling you could try adding the following to your css_additional.css template:

media only screen and (max-width:1024px) {
#main-navbar .main-nav li,
#sitebuilder-wrapper,
.config-site-menu-item {
display:none;
}
#main-navbar .main-nav li.lnkAdminCP {
display:inline-block;
}
}

The >768px media query breakpoint already exists in the default theme.

So i switched to the VB5 default theme just to test it out and it works. Doesnt look as good as it does when its turned to the wide screen. But ill take it. I have a test forum that is the same as the 8 custom themes that are not working.

Im not sure what part of that code to copy and paste. Because it looks like you tagged someone. Can you only post the code that should be copied and pasted and ill try it in my test forum.

Cheers mate.

[delicjous]

Did you already put that code into the additional.css? I do not see the forum like this in tablet mode on windows-firefox!

[Cfleet1]

I just now entered the code in css. It now looks like it does on your picture. I never looked using Firefox. Only chrome and safari. The code helps but as you can see the banner doesnt fit. Its just a sloppy look on ipad portrait.

[glennrocksvb]

In vB5, the breakpoint for "desktop" view is 768px (which is iPad device width) and up. Any size lower than that is considered to be in "mobile" view. Showing desktop view on iPad portrait is too tight on the 70-column. If you want the homepage to be in mobile view on iPad, then I have a fix for that.

https://vbmods.rocks/forum/vbulletin...-portrait-mode

[Cfleet1]

In vB5, the breakpoint for "desktop" view is 768px (which is iPad device width) and up. Any size lower than that is considered to be in "mobile" view. Showing desktop view on iPad portrait is too tight on the 70-column. If you want the homepage to be in mobile view on iPad, then I have a fix for that.

https://vbmods.rocks/forum/vbulletin...-portrait-mode

Thanks Glen. Iused that fix but the navbar and banner still look way off.

[Wayne Luke]

There is currently a JIRA open for this issue - http://tracker.vbulletin.com/browse/VBV-17960

[Cfleet1]

Votedddddddddddd - I have to post 10 characters so........lol

[glennrocksvb]

I just realized I have a separate solution to override the 768px desktop breakpoint and that applies to all pages on the site and not just homepage. Basically the solution treats iPad portrait mode to be mobile on all pages. I will post the solution on my site soon.

[Cfleet1]

I just realized I have a separate solution to override the 768px desktop breakpoint and that applies to all pages on the site and not just homepage. Basically the solution treats iPad portrait mode to be mobile on all pages. I will post the solution on my site soon.

Will that paste over the code i just installed? Or in addition to? Also will that fix the banners not connecting to the top of the nav bar?

[glennrocksvb]

It's a separate solution. It doesn't need any CSS code. iPad Portrait mode will exactly look like how it does on mobile.

[Cfleet1]

Awesome Glenn

[Cfleet1]

I just realized I have a separate solution to override the 768px desktop breakpoint and that applies to all pages on the site and not just homepage. Basically the solution treats iPad portrait mode to be mobile on all pages. I will post the solution on my site soon.

Is this done yet Glenn? My forum looks bad on ipads with the banner not having a bottom border.