Mobile Style Not Working After Login

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • ShannonA
    Member
    • Jun 2001
    • 90

    [Forum] Mobile Style Not Working After Login

    I recently turned Mobile Style on as the default style for old and new browsers in a recently upgraded vB4.2.4RC1 instance at http://forum.rpg.net. Somewhere amidst that all the mobile style stopped working correctly. The main page looks fine before you login, but after login all the text goes white and the category divs seem like they're only taking up a quarter of the page.

    If you go to a subpage, things are fine; if you logout, things are fine. But the main page is largely broken.

    This should be an out of the box mobile style; I even told it to revert styles & variables just to be sure.
  • Mark.B
    vBulletin Support
    • Feb 2004
    • 24286
    • 6.0.X

    #2
    Have you any addons running, or anything in the additional.css template?
    MARK.B
    vBulletin Support
    ------------
    My Unofficial vBulletin 6.0.0 Demo: https://www.talknewsuk.com
    My Unofficial vBulletin Cloud Demo: https://www.adminammo.com

    Comment

    • ShannonA
      Member
      • Jun 2001
      • 90

      #3
      Originally posted by Mark.B
      Have you any addons running, or anything in the additional.css template?
      I temporarily turned off all my plug-ins last night to verify the problem still existed without them. (It did.)

      There's no additional.css on the mobile style. (Just did a search to verify.) As I said, all the templates and styles should be reverted to their starting setup.

      I've included some screenshots of the home page before and after login.


      Attached Files

      Comment

      • Mark.B
        vBulletin Support
        • Feb 2004
        • 24286
        • 6.0.X

        #4
        What version of php are you running?
        MARK.B
        vBulletin Support
        ------------
        My Unofficial vBulletin 6.0.0 Demo: https://www.talknewsuk.com
        My Unofficial vBulletin Cloud Demo: https://www.adminammo.com

        Comment

        • ShannonA
          Member
          • Jun 2001
          • 90

          #5
          Originally posted by Mark.B
          What version of php are you running?
          PHP is 5.6.22

          The problem is turning up for me on iOS10 on an iPhone7.

          Also reported on Huawei Android tablet (back on Android 4.2.2).

          Comment

          • ShannonA
            Member
            • Jun 2001
            • 90

            #6
            Working with Firefox's Responsive Design Mode tool, the buggy home page shows up when I drop to 360x640 or lower; it disappears when I pop up to 768x1024 or higher. (That is, the top icons realign correctly and the text becomes visible.)

            Comment

            • ShannonA
              Member
              • Jun 2001
              • 90

              #7
              The buggy display also disappears when you change from portrait to landscape even down at 320x480. Verified on both device & Firefox.

              Comment

              • ShannonA
                Member
                • Jun 2001
                • 90

                #8
                Originally posted by ShannonA
                Working with Firefox's Responsive Design Mode tool, the buggy home page shows up when I drop to 360x640 or lower; it disappears when I pop up to 768x1024 or higher. (That is, the top icons realign correctly and the text becomes visible.)
                In fact, stretching the responsive frame by hand, the magic number seems to be 379 pixels wide. You hit that, and the misaligned buttons jump up and everything works fine.

                Comment

                • ShannonA
                  Member
                  • Jun 2001
                  • 90

                  #9
                  Digging through the CSS, the bug is in the header-right style, which is simply defined as float: right. When the screen is too small, that causes the buttons to bounce into the next row, totally breaking the display. If you swap the float: right for display: none, everything works right. Well, you no longer have your login buttons and such, so clearly that's not acceptable, but it verifies the problem.

                  I would guess there's a "clear" in the CSS for everything but the main-page-after-login and it's missing from there for some reason.

                  Comment

                  • Mark.B
                    vBulletin Support
                    • Feb 2004
                    • 24286
                    • 6.0.X

                    #10
                    This doesn't happen on a default installation so there is something related to your setup that is causing this.
                    MARK.B
                    vBulletin Support
                    ------------
                    My Unofficial vBulletin 6.0.0 Demo: https://www.talknewsuk.com
                    My Unofficial vBulletin Cloud Demo: https://www.adminammo.com

                    Comment

                    • ShannonA
                      Member
                      • Jun 2001
                      • 90

                      #11
                      Originally posted by Mark.B
                      This doesn't happen on a default installation so there is something related to your setup that is causing this.
                      What could it be when I've turned off all the plug-ins and reverted all the mobile styles to default?

                      (And just put in a fresh build, albeit the 4.2.4 RC1.)
                      Last edited by ShannonA; Fri 7 Oct '16, 9:54am.

                      Comment

                      • ShannonA
                        Member
                        • Jun 2001
                        • 90

                        #12
                        Well, I just fixed it by using a logo that's narrower than the 130px vBulletin mobile logo.

                        Comment

                        • ameran
                          Member
                          • Jan 2010
                          • 35

                          #13
                          Originally posted by ShannonA
                          Well, I just fixed it by using a logo that's narrower than the 130px vBulletin mobile logo.
                          You are absolutely correct. I had the same issue with a fresh installed vBulletin. i made my mobile logo 130 pixel wide and the issue is gone. Thank you for help.
                          sigpic

                          Comment

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