iPad landscape breakpoint

Design help General
1

Is an iPad landscape breakpoint possible yet? I find that I need to tweak things for the smaller viewport of an ipad in Landscape mode like a nav that is not necessary on desktop which seems to be the only viewport I can amend if I want to get it to appear that way in ipad landscape?

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

Webflow doesn’t use a breakpoint for tablet landscape (I don’t know why)… However they are currently building/investigating how to add more breakpoints.

You could try to use custom CSS mediaqueries

Mediaqueries

If you need help with this I can help you.

2 Likes
3

you can use the following code (ipad landscape > all devices)

<style>
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* insert css here */
}
</style>

or (ipad landscape > with retina display only)

<style>
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 2) { 
/* insert css here */
}
</style>
2 Likes
4

Hey PhilippX, Thank you for this code. I’m new to webflow so I am asuuming I would place the code you provided to the Custom Code are on the page I want to style? Thank you again!

1 Like
5

I would also love some pointers on this @PhilippX — having some issues on iPad landscape views.

6

You can insert the code in the custom code section = inside < head > tag at the respective site or globally in the setting panel and then write some custom CSS styling as for example

.class {color: blue;}

within the {…} brackets. Hope this helps!

7

Thank you! Appreciate it :slight_smile:

1 Like