Announcement

Collapse
No announcement yet.

Site logo on iphone looks good in portrait, tiny in landscape

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

  • [Bug / Issue] Site logo on iphone looks good in portrait, tiny in landscape

    On my iphone X, turning to landscape makes the logo shrink to an unbelievably tiny size. See photos. Any ideas?
    Also, in landscape the page width (and background) does not extend to the whole screen. The logo was uploaded with sitebuilder quick setup. It's 529 x 163 px.

    Click image for larger version  Name:	iphoneX-portrait.jpg Views:	2 Size:	48.4 KB ID:	4381960Click image for larger version  Name:	iphoneX-landscape.jpg Views:	1 Size:	40.9 KB ID:	4381958

  • #2
    Have you tried this fix?

    https://vbmods.rocks/forum/vbulletin...landscape-view
    Christian Forums
    Reformed Forums
    Christian Bible Study
    Christian Forums
    Baptist forum
    Online Bible Study

    Comment


    • #3
      Question 1: Brilliant! Thank you! Fixes it perfectly!

      Question 2: The page width in landscape mode doesn't extend the full width of the screen... still wondering about this one. Maybe I'll make a new post about that issue, since it's not reflected in the title of this one...

      Comment


      • #4
        Originally posted by StephenKay View Post
        Question 2: The page width in landscape mode doesn't extend the full width of the screen... still wondering about this one. Maybe I'll make a new post about that issue, since it's not reflected in the title of this one...
        I've seen this on sites that use CSS to alter the width of the header to 100%. The header and content are in different containers but improperly written CSS can affect both.
        Translations provided by Google.

        Wayne Luke
        The Rabid Badger - a vBulletin Cloud customization and demonstration site.
        vBulletin 5 Documentation - Updated every Friday. Report issues here.
        vBulletin 5 API - Full / Mobile
        Vote for your most annoying bugs.
        I am not currently available for vB Messenger Chats.

        Comment


        • #5
          OK - except I just removed ALL .css tweaks and it still does the same thing. This is the site in Landscape with all css removed, using the default template. Is it supposed to look like that?

          EDIT: I put in the portrait view as well. See how the content area extends the full width of the screen in portrait? And in landscape, it has extra space on the sides, and on the sides of the menubar. Is it supposed to be that way?

          Comment


          • #6
            The first picture is how it is supposed to look at 1024 pixels width. The second picture is how it is supposed to look at smaller widths.
            Translations provided by Google.

            Wayne Luke
            The Rabid Badger - a vBulletin Cloud customization and demonstration site.
            vBulletin 5 Documentation - Updated every Friday. Report issues here.
            vBulletin 5 API - Full / Mobile
            Vote for your most annoying bugs.
            I am not currently available for vB Messenger Chats.

            Comment


            • #7
              Please take a look at the images at the top. The site has a background. In landscape view, the background is not replicated to the edges, it only fills the header area (and the background color is visible on the sides). If you're going to have some space on the sides, the background should be filling it, should it not?

              EDIT: here's the site at 1024 on a computer. The background is replicated to the edges. It does not do this properly in landscape on the phone, it seems...

              Click image for larger version  Name:	1024.jpg Views:	1 Size:	38.0 KB ID:	4382029
              Last edited by StephenKay; Mon 27th Nov '17, 1:54pm.

              Comment


              • #8
                That is the way it is designed to work. Displays on small screens are not exact replications of displays on larger screens, there have to be some compromises.

                You may be able to change this with some custom css, however we can't provide support for this as it is custom coding.
                MARK.B | vBULLETIN SUPPORT

                TalkNewsUK - My vBulletin 5.4.0 Demo - FEATURING "ROUTE BY NODE"!
                AdminAmmo - My Cloud Demo

                Comment


                • #9
                  OK, I'll have to fool around with that. Is there a way to inspect elements on an iPhone??

                  But realistically, if that's the way it's supposed to work, that's a bad design decision on VB's side. Either extend the content area to the edges (like portrait mode), or extend the background to the edges, like the computer. Having stripes of the background color down the sides looks bad, IMO. Thanks.

                  Comment


                  • #10
                    Originally posted by StephenKay View Post
                    OK, I'll have to fool around with that. Is there a way to inspect elements on an iPhone??

                    But realistically, if that's the way it's supposed to work, that's a bad design decision on VB's side. Either extend the content area to the edges (like portrait mode), or extend the background to the edges, like the computer. Having stripes of the background color down the sides looks bad, IMO. Thanks.
                    I just make a browser window small enough to make the display go like that but large enough to just about see the inspect element box (or pop it out).
                    MARK.B | vBULLETIN SUPPORT

                    TalkNewsUK - My vBulletin 5.4.0 Demo - FEATURING "ROUTE BY NODE"!
                    AdminAmmo - My Cloud Demo

                    Comment


                    • #11
                      I tried that. I cannot get that "landscape" state on the computer. As soon as it gets narrow enough to hide the navbar and make a popup menu, the content area extends completely to the sides like in phone portrait mode.

                      Comment


                      • #12
                        After investigating some more, it seems this issue could be due to the fact that I have an iphone X, and the max-device-width is 812px. So when you turn it sideways/landscape, you are getting a stripe down each side because the whole page is not wide enough. I'm not smart enough to fix it, however.

                        Comment


                        • #13
                          In the background discrepancies above, the background doesn't even show in responsive mode. This tells me that some code is doing that. For instance, when I do a full-screen background in vBulletin, I add code to explicitly hide those images from mobile devices. This is a bandwidth issue more than anything and on very small screens, they won't ever see the background anyway.

                          If you use Google Chrome, you can put a site into Responsive Mode to trigger CSS changes and inspect elements. To do this, press F12 to open the developer tools and click on the "Device Toolbar" button. You can choose the device size and whether it is portrait or landscape.

                          Click image for larger version

Name:	image_70839.png
Views:	1
Size:	18.3 KB
ID:	4382127 ​​​​​​​
                          Translations provided by Google.

                          Wayne Luke
                          The Rabid Badger - a vBulletin Cloud customization and demonstration site.
                          vBulletin 5 Documentation - Updated every Friday. Report issues here.
                          vBulletin 5 API - Full / Mobile
                          Vote for your most annoying bugs.
                          I am not currently available for vB Messenger Chats.

                          Comment


                          • #14
                            I'm not following what you are saying. The background does indeed show on the iphone; it's just blue at the top so maybe you're not noticing it. Also it shows if you are using opacity on the content background, as I am doing. Here's some pictures from the bottom. In landscape mode, note the blue stripes down the sides which is the background color. So the content and page background image for some reason is not extending full width on the iphone X. BTW, my iphone 5 does not have the same issue - there are no blue stripes down the side in landscape mode.

                            EDIT: I just added a third picture, which is the same landscape view on my iphone5. No blue stripes down the sides.

                            image 1: iphone X in landscape
                            image 2: iphone X in portrait
                            image 3: iphone 5 in landscape
                            Last edited by StephenKay; Tue 28th Nov '17, 12:48pm.

                            Comment


                            • #15
                              I was referring to the images you posted in reply #5 above. They do not have the same background as the image in reply #7.

                              If you're going to expect us to retrieve information out of screenshots instead of providing URLs, the screenshots need to be complete pages and consistent.

                              The first image in post #14 shows a margin and the background isn't covering that. The margins are normal. Why they aren't covered by the background would be dependent on your custom CSS and what element the background is applied to. I am guessing it is applied to the <body> tag and not the <html> tag but can't say for certain. Since the page in question hasn't been linked to in this topic, it is difficult to say exactly what the problem is or where it is coming from.
                              Translations provided by Google.

                              Wayne Luke
                              The Rabid Badger - a vBulletin Cloud customization and demonstration site.
                              vBulletin 5 Documentation - Updated every Friday. Report issues here.
                              vBulletin 5 API - Full / Mobile
                              Vote for your most annoying bugs.
                              I am not currently available for vB Messenger Chats.

                              Comment

                              Working...
                              X