I’ve been experiencing this problem on pretty much all screens, but here is a good example of my problem.
On my iPad Mini I’ve taken a screenshot of what the page looks like. However, to get it to look like it is with reduced margin and white space, I had to jumble everything in the actual editor, even though it says it’s sized for an iPad Mini.
This is just one example but I’m pretty much experiencing this problem for all screen sizes.
So my question is why is this happening and is there anything I can do to fix it, or do I just have to go based on what the actual screens are telling me i.e. iPad, iPhone etc and have people test on different devices.
Hi @g4av1n, the ipad mini when in horizontal view is considered Desktop viewport in Webflow and when rotated to portrait view would be the tablet viewport in Webflow.
The ipad mini has a screen width of 1024px which is greater than the desktop cutoff of 992 px so the desktop layout will be shown on ipad mini when in horizontal view.
I would probably create the desktop and tablet views to have the same responsive styling, so that the layout looks the same on both desktop and tablet view.
Use % based widths and make sure all elements are 100% within the body viewport. I would also use Flexbox for your styling, here is a good examples page: https://flexbox.webflow.com
Also, on the tablet and lower views, do not use fixed heights for elements, rather use auto height and use paddings to add space between element edges.
If the styling issue persist, let me know so I can help take a look further.
Hey @cyberdave thanks for your reply. The screenshot on the iPad Mini is in portrait mode, matching the editor. I don’t understand why in the editor it looks different than the actual device. It seems to be this way for all of my devices.
Also, everything fits within the body viewport except for the Shopify ‘Add to Cart’ embed, but only because in the actual view on a device it fits as the dynamic embed box is much larger than the add to cart button.
Hi @g4av1n, it looks like there is some styles on your elements that is using some height styles that should be looked at, when the page is resized vertically, all elements should stay in place, not be resized or moved: Screen Recording 2019-12-28...
