Hi, I am facing website responsiveness problem. It’s not the first time, my website looks perfectly fine when viewed in webflow, it looks responsive with no issues. but when visit my site on mobile landscape on mobile device it starts acting up. I don’t know what is the issue. it seems to me that on landscape settings of tablet view start to appear. I have added the read only link below. Proble occurs on CMS template pages, last image. here’s the website link too
https://frozen-7d86a1.webflow.io/fruits/banana
please help me with this issue.
https://preview.webflow.com/preview/frozen-7d86a1?utm_medium=preview_link&utm_source=designer&utm_content=frozen-7d86a1&preview=1daa72246c4a70fd8f65494bd570eac0&pageId=60ce13ff55b05169c7331682&itemId=60ce140782c9a83c304a7891&workflow=preview
Check your .bottom-section.
It has 80vh or 100vh as the maximum height. That to me seems to restrict it height on a smaller landscape screen to less than the height of the content, causing content to overlap the footer. Is that what you mean?
I have changed the height to 100vh too, but when i turn my phone to landscape, pictures overlap the footer. If i preview the website within webflow, it seems responsive on all devices, but on published website, it shows this problem. I have tried changing vh of every element scaled everything down but on landscape mode this issue remains.
I have attached the pictures .
100 vh maximum height is your problem then. VH = height of the viewport, and with a small landscape oriented screen that’s just very narrow and not high enough for your content.
