Lay Theme Forum

    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Popular
    • Users
    • Search

    Portrait Landscape Font Bug

    General Discussion
    2
    14
    103
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • D
      Dominik Gauly last edited by

      Re: Font-size problem on mobile

      I have the same issue and tried putting the html code provided and still:

      When I switch from landscape to portrait on mobile my project text gets way too big.

      What can I do?IMG_1962.PNG IMG_1961.PNG

      1 Reply Last reply Reply Quote 0
      • D
        Dominik Gauly last edited by

        Link is for example:

        http://www.tobiaskirschner.de/cairo-s-o/

        Browser:
        Chrome, newest update

        Lay Theme, newest update

        Cache cleared multiple times

        1 Reply Last reply Reply Quote 0
        • D
          Dominik Gauly last edited by

          Think I found the problem. It works if I change the phone breakpoint to 2500 which is then bigger than the landscape of my iPhone 11 (2436px). The problem is now on my old macbook (1440 px) I then only see my mobile version even in my browser window on my laptop........

          Can I tell the mobile version any other indicator that it’s being watched on a phone other than the pixelwidth?!

          1 Reply Last reply Reply Quote 0
          • Richard
            Richard Global Moderator last edited by

            Dear @Dominik-Gauly

            Its been 5 days, i wanted to follow up and see if you came to any conclusion of if help is still needed?

            Apologies for the delay and thank you for using Lay Theme

            Sincerely
            Richard

            D 1 Reply Last reply Reply Quote 0
            • D
              Dominik Gauly last edited by

              Hi @Richard-Keith!

              Thank you for getting back to me.

              I could not solve the problem yet.

              I double checked the following things:
              – tried the code Armin provided

              html {
              -webkit-text-size-adjust: 100%; /* Prevent font scaling in landscape while allowing user zoom */
              }

              – I cleared the text style and set it to standard
              – created a new text format, with only one fontsize for desktop/mobile and created a custom phone layout

              The only thing that changed anything on the textsize of my mobile landscape was setting the mobile breakpoint to 2500 px which then doesn’t allow to see my desktop version on my laptop.
              It seems to me switching to landscape does tell the text to switch to the desktop version but ONLY for the credits, you know?

              I hope we can find a solution to this.

              Best,
              Dominik

              1 Reply Last reply Reply Quote 0
              • D
                Dominik Gauly @Richard last edited by

                Hey @Richard-Keith,

                is there anything I can do about it?

                1 Reply Last reply Reply Quote 0
                • Richard
                  Richard Global Moderator last edited by

                  Dear @Dominik-Gauly

                  A breakdown of the issue just to get back on the same page.
                  http://www.tobiaskirschner.de/cairo-s-o/

                  1. Problem is related to text:

                  2. Landscape view on phone is wide ( large number of pixels across )

                  so when you then revert back to portrait mode the text retains the Landscape mode size ( too big )

                  1. You have changed the mobile breakpoint to be quite wide (2500px ) so basically all devices now use the "Mobile Layout"

                  2. You have added from Armin :

                  html {
                  -webkit-text-size-adjust: 100%; /* Prevent font scaling in landscape while allowing user zoom */
                  }

                  to the Custom CSS area within 'Lay Options - Custom CSS & HTML' and this doesn't fix your problem.

                  Is this all Correct? :)

                  Best
                  Richard

                  D 1 Reply Last reply Reply Quote 0
                  • D
                    Dominik Gauly @Richard last edited by

                    Hi @Richard-Keith,

                    that’s correct with one addition concerning point „2.“:
                    When I revert back to portrait mode the text switches back to the correct small size set for phone.

                    What I don’t understand is that the text elements „CAIRO s/o“ and „Keine Zeit Medien“ work correctly.
                    It’s only the credits „Camera: Benedikt Dresen...“ (using the Default text setting) that seem to confuse mobile landscape with desktop. I attached an image of my default text setting.

                    Best,
                    Dominik

                    Bildschirmfoto 2020-10-30 um 10.50.51.png

                    1 Reply Last reply Reply Quote 0
                    • Richard
                      Richard Global Moderator last edited by

                      Dear @Dominik-Gauly

                      Sorry for the delay, could you please post an image of the text type that does work - the H1 'CAIRO' text type and then i can compare, I think i may have it:

                      Screen Shot 2020-11-06 at 8.45.42 AM.png

                      Alternatively,
                      Could you please send your website address, /wp-admin/ username and password and a link to this topic to me in "Private Chats" ( do not show private info on this thread :)

                      And i will try to get back to as shortly as possible with something :)

                      Let me know & best wishes, thank you for your patience

                      Richard

                      D 1 Reply Last reply Reply Quote 0
                      • D
                        Dominik Gauly @Richard last edited by

                        @Richard-Keith

                        Hey Richard!

                        Thank you for looking into the problem!

                        Attached I am sending you the photo of my H1 Text Setting.

                        I will also send you the requested information via private chats.

                        Best,

                        Dominik

                        Bildschirmfoto 2020-11-08 um 12.48.43.png

                        1 Reply Last reply Reply Quote 0
                        • Richard
                          Richard Global Moderator last edited by

                          Dear @Dominik-Gauly

                          I have logged in and the Mobile text seems fine?
                          Have you tried clearing your browsers Cache to see if this is the issue

                          Screen Shot 2020-11-12 at 2.15.20 PM.png

                          Am i missing something, im sorry this is taking so long , i wish to help :)

                          Best
                          Richard

                          D 1 Reply Last reply Reply Quote 0
                          • D
                            Dominik Gauly @Richard last edited by

                            @Richard-Keith

                            Hey Richard-Keith,

                            the problem occurs when you switch to landscape view.

                            Best,
                            Dominik

                            1 Reply Last reply Reply Quote 0
                            • Richard
                              Richard Global Moderator last edited by

                              Dear @Dominik-Gauly

                              Some things/ options i have found out after some research:

                              Its difficult to find a solution for Landscape Mobile that doesn't affect Desktop but i have found this:

                              https://stackoverflow.com/questions/62182220/how-to-target-only-landscape-mobile-devices-without-affecting-desktop-via-css

                               @media (not: pointer) and (orientation: landscape) { 
                              ._Default {
                              font-size: 10px !important;
                              }
                              }
                              

                              Try adding this to Custom CSS and hopefully this has some success.

                              Or:
                              I think your best approach is to choose for landscape a smaller font size, as mobile landscape acts the same as desktop or tablet e.g

                              font-size:10px;
                              

                              Or Forcibly stop the user being able to view mobile in Landscape, stop the orientation ability, this may be a more suitable approach for you:

                              https://stackoverflow.com/questions/43634583/prevent-landscape-orientation-mobile-website

                              The Browser & Lay Theme with understand a shift from Desktop to Mobile, But when you start to dictate these changes based on Screen width you will likely never be able to find a solution that works for everything.

                              I see here a limitation on the part of Lay Theme that i will put into the development notes for the future.

                              With Lay Theme and with many other websites, the styling settings are based on viewport width, Phones are changing rapidly and are basically becoming desktop handhelds and we are seeing more clashes.

                              I do'nt think you will be able to have in both ways, Control over Landscape in both Desktop and Mobile, Sadly i think its best to choose a font size that works for both.

                              Best wishes & sorry the inconvenience

                              Richard

                              1 Reply Last reply Reply Quote 0
                              • D
                                Dominik Gauly last edited by

                                @Richard-K

                                Hey, thank you very much for researching my issue.

                                I couldn’t fix the problem yet.

                                One last question:
                                Why are all other elements fine for mobile?
                                Only the text (Screenshot) switches to some bigger version, even if I give them the same size for mobile and desktop?

                                Bug.jpg

                                1 Reply Last reply Reply Quote 0
                                • First post
                                  Last post

                                Try this to fix issues before you post:

                                Use the Search Feature. Maybe there is already a solution to your issue.

                                1. Update Lay Theme and all Lay Theme Addons
                                2. Disable all Plugins
                                3. Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code ", click "Save Changes"
                                4. Now see if your problem solved itself
                                5. Go here, see if your problem is listed here:
                                Troubleshooting

                                When you post:
                                1. Post a link to where the problem is
                                2. If the problem is difficult to explain, post screenshots / link to a video to explain it

                                Thanks!

                                Online Users

                                S
                                K
                                T
                                G
                                I
                                A

                                Recent Topics

                                • S

                                  Image hover -> Image on image

                                • C

                                  centred Carousel fixed width and proportions

                                • text underline

                                • open all links in a thumbnail grid in a new tab

                                laytheme.com