Announcement

Collapse
No announcement yet.

Problems on Ipad and Tablets

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Problems on Ipad and Tablets

    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?



    ​​​​​​

  • #2
    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.

    Comment


    • #3
      Originally posted by In Omnibus View Post
      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?

      Comment


      • #4
        Originally posted by Cfleet1 View Post

        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.

        Comment


        • #5
          Originally posted by In Omnibus View Post

          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.

          Comment


          • #6
            Did you already put that code into the additional.css? I do not see the forum like this in tablet mode on windowsClick image for larger version

Name:	forum.jpg
Views:	13
Size:	254.0 KB
ID:	4383350-firefox!
            vBulletin-Forum.de closed!

            Comment


            • #7
              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.

              Comment


              • #8
                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

                GIPHY for vB5 AutoLinker Auto-Create Flag Report Topic Social Icons in Postbit Clear Cache Cron DragDrop Upload Topic AJAX AutoUpdate Custom Avatars Selector Stop Links in Posts...and more!

                Comment


                • #9
                  Originally posted by Glenn Vergara View Post
                  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.

                  Comment


                  • #10
                    There is currently a JIRA open for this issue - http://tracker.vbulletin.com/browse/VBV-17960
                    Translations provided by Google.

                    Wayne Luke
                    The Rabid Badger - a vBulletin Cloud demonstration site.
                    vBulletin 5 API - Full / Mobile
                    Vote for your favorite feature requests and the bugs you want to see fixed.

                    Comment


                    • Cfleet1
                      Cfleet1 commented
                      Editing a comment
                      Votedddddddddddd - I have to post 10 characters so........lol

                  • #11
                    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.

                    GIPHY for vB5 AutoLinker Auto-Create Flag Report Topic Social Icons in Postbit Clear Cache Cron DragDrop Upload Topic AJAX AutoUpdate Custom Avatars Selector Stop Links in Posts...and more!

                    Comment


                    • #12
                      Originally posted by Glenn Vergara View Post
                      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?

                      Comment


                      • Glenn Vergara
                        Glenn Vergara commented
                        Editing a comment
                        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
                        Cfleet1 commented
                        Editing a comment
                        Awesome Glenn

                    • #13
                      Originally posted by Glenn Vergara View Post
                      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.

                      Comment

                      widgetinstance 262 (Related Topics) skipped due to lack of content & hide_module_if_empty option.
                      Working...
                      X