First time on Webflow and have made my desktop site then moved down the breakpoints to create the portrait tablet and mobile which when i publish all look great and work exactly how i want them to. BUT and this is making me pull my hair out, the second you turn your mobile landscape nothing is where it should be and the scaling is out the window. I cant seem to find a single good explanation on how to correctly set up landscape view at all and I hope its just a noob mistake!
Please can someone help, I am new so the most detailed explanation would be amazing!
Welcome to the forum! Have you adjusted anything on the mobile landscape view? Each breakpoint should be styled individually. You can get around re-doing a lot of the work by using % for sizes rather than px.
i have messed about with % and the breakpoint but nothing seems to be consistent for getting it just right its so frustrating because there is hardly any info on this and nobody seems to know the answer!
You won’t get anything that looks %100 the same on each screen, simply because their ratios are all different (iPhone vs. Samsung phone vs. every other brand). It’s a matter of adjusting it so it looks nice on each screen. Pixel-perfect doesn’t exist in mobile-responsive design. I use % for all widths for example. So a custom container might be 75% width on desktop and %90 on mobile. That’s a container inside of a standard section so the container takes up %75 of the screen and %90 of the screen on tablet/phone. The webflow built-in section covers the screen anyways so no need to define a width there. In fact, that can cause some odd overflow effects
