Design advice/help from Desktop to Ipad Landscape

[MarkyMark (Mark A.)]

Hello,

Does anyone have any advice or suggestions when designing your elements with the Ipad landscape view in mind?

For example: I have a 1200px wide div with my content inside for the desktop view.

On my Ipad landscape view of course it cuts things off, but I can’t change the size of the div too much because the client doesn’t like how much space is left around when it’s just in a container and I have to say I agree.

Should I just set the div width to maybe a certain percentage?

Any help/suggestions with this topic would greatly be appreciated. I really wish @webflow would come out with an Ipad Landscape Mode!! Or allow us to add our own breakpoints at certain sizes.

---

Here is my public share link: LINK
(how to access public share link)

[Tom1984 (Tom)]

Using a fixed width is not the best practice. It is indeed better to use percentages or the vh/vw option (depending on what you want to achieve).

If you want your DIV to be 1200px wide, while scaling down on tablets/phones, you should set the width of the DIV to, for instance, 100% and the max width to 1200px. That way the DIV is 1200px wide, but scales smoothly on smaller screens:

Setting the DIV width to 100%, will make it as large as the Parent. Meaning, if you have a DIV that is 500px wide, and inside that DIV, you create a DIV that is 100% wide, it will also be 500px wide (ie. 100% of 500px = 500px). If it is the first DIV, it will take the width of the BODY and as such will span the entire width of the browser.

Using VH (viewport height) en VW (viewport width) is another option. Setting 100VW as width of a DIV, will make the DIV as wide as the browser window (viewport).

Perhaps a tip:
In the desktop view, you can scale the designer to iPad landscape width (I think iPad was 1024px wide):

Hope this covers some of your issue’s.

[MarkyMark (Mark A.)]

@Tom1984, thank you. I took your advice and it definitely helped, thank you for such a detailed response it has helped me out so much, you the real mvp Tom!!!

-Mark