Landscape Tablet View Menu Styling

Hi @cyberdave @vincent @webflow
I was a little disappointed to realise that there was no breakpoint for landscape tablet views. Considering it is such a common view it doesn’t make much sense to leave it out in my opinion. Why has this been done? Maybe I am missing something?

Despite this being the case, I have managed to find a way around it with JavaScript.

@media screen and (max-width: 1250px) { .w-nav[data-collapse="medium"] .w-dropdown, .w-nav[data-collapse="medium"] .w-dropdown-toggle { display: block; } .w-nav[data-collapse="medium"] .w-dropdown-list { position: static; } .w-nav[data-collapse="medium"] .w-nav-menu { display: none; } .w-nav[data-collapse="medium"] .w-nav-button { display: block; } }

I have not yet managed to style the drop down menu. When I try to style it in the design view, I am either designing the ‘Desktop’ view or the ‘Tablet Portrait’ views.

Could you help me with understanding what CSS code I will need to add into the manual coding area so that I can get it up and running?

The links required for help are below.

Many thanks in advance for your time.

Tom :grinning:


Here is my site Read-Only link:
[1]: https://preview.webflow.com/preview/jc-threads-shop?utm_source=jc-threads-shop&preview=48e9dd1d1b0e96e2fdfddb3f6799aeeb
[2]: https://jcthreads.co.uk

There is one: it’s the Desktop one. Any tablet landscape mode is wide enough to register passed the Desktop breakpoint.

Breakpoints aren’t defined by devices but by dimensions. You can’t have what you’re looking for, a breakpoint for landscape tablet.

Webflow breakpoints:

  • Desktop (Screens larger than 992 pixels includes larger screens, such as desktop displays and laptops)
  • Tablet (screens between 768 and 991 pixels wide)
  • Mobile - Landscape (screens between 767 and 480 pixels)
  • Mobile - Portrait (screens between 479 and 240 pixels)

In general, landscape tablets viewports are around 1024 pt.

So there is no way to have a desktop breakpoint and a landscape tablet breakpoint being 2 different things.

When you need to display content tailored for a tablet, you need to use Javascript to filter by OS and display another page or another set of elements.

2 Likes