I am having a design/ layout issue that appears when I view my website on my iPhone on Landscape mode. Part of my content gets cut off when I turn my phone on Landscape. It looks almost like the section Height is getting resized even when I set a minimum height it is not recognized. I have also tried to set margins to the elements within the section but keep getting cut off and when I set the sizing to shrink as needed.
Does anyone have any idea how I can sort this out?
This is what’s showing up on my iPhone. What are you trying to fix? It looks like the read-only link doesn’t match what’s published did you publish it again to show your new content?
Hi @AurelieTack, thanks for your reply, it looks like you have content which is taller than the height of the iphone you are using in landscape mode, the issue does not appear as much in Desktop, Tablet and mobile portait because there is more height available.
I would recommend that on landscape mode, you alter the layout so that your content is in two columns perhaps, with the image and text side by side so that you can fit everything in to the smaller viewport size.
You mentioned you were using an iPhone, can you share the exact model?
The image on the Who page seems to be used as a background image with cover set to on, so in that case the image will crop as the viewport gets smaller than the image. Setting the background image to Contain in background image settings will cause the image to resize as the parent elements get smaller rather than crop when using the Cover option.
It is an iPhone Xr. I played around a bit this morning and it seems that it is using the tablet breakpoint instead of the mobile landscape breakpoint. which would explain the height issue.
Hi @AurelieTack, thanks for your reply, when I view the homepage on iphone xr, this is the result I see in the rendering:
From here it looks like the breakpoint is working ok, but the styles applied to the elements on the mobile landscape that are applied/inherited from the tablet portrait view does not look the same because the content is taller than the viewport on the iphone xr (the viewport size for mobile landscape can vary in size between devices).
The content parent section is now set to be 100vw and 100vh tall, but the content itself on mobile landscape is not styled to shrink at the moment, the content expands and is not 100% visible in the initial viewport view at page load.
I would reduce font size and remove any top margins on elements (as much as possible to get rid of extra whitespace) and try to resize your items a little smaller to fit in the viewport, then check again at mobile portrait view and adjust if necessary.
When I set the Section height to auto and just add a little padding, it should look better on mobile landscape when rendered:
