Style Cascade to Portrait and Landscape Viewports

Hello,

While I understand that styles cascade automatically from desktop or tablet downward to mobile, can someone clarify whether mobile landscape and portrait views have to be styled separately?

If this is true, is it therefore best practice to use percentages as much as possible to maintain responsiveness across viewports and avoid a lot of rework?

HI @mmediaman, thanks for your post and great question.

The short answer is they do not have to be styled separately.

One use case is If you needed to make a style change at Tablet Portrait view, you would make that change, and then just check on mobile if any further style change is necessary.

You nailed it on the percentage based layouts, they will enable you to have very responsive sites.

One thing I suggest, is to create small blank test sites, where you can experiment with the layouts with some basic grid elements and if you have questions, post the link to your test site :wink:

I hope this helps, Dave.

Thanks for the reply @cyberdave.

So just to be clear, styles between portrait and landscape viewports are automatically kept separate by the resulting code IF, they are styled separately after they have cascaded from above?

Hi @mmediaman, styles cascade down from Desktop->Tablet->Mobile Landscape->Mobile Portrait.

If you make a style change at Tablet view, it will not affect Desktop styles, but will affect Mobile Landscape and Mobile Portrait.

If you make a style change at Mobile Landscape, it will affect Mobile Portrait, but not the Tablet view or higher.

Styles are kept separate via css media queries (which are created automatically for you by Webflow), that alter the styles when the viewports reach the the breakpoint width in px:

Desktop: 992px and above
Tablet: 991px and below
Mobile Landscape: 767px and below
Mobile Portrait: 479px and below

Does this help? :slight_smile: Dave

Hi @cyberdave,
I understand the logic behind cascading down from web to tablet, landscape and portrait last. Landscape mobile resemble the tablet by proportion. But most mobile sites are used in a portrait view rather than landscape. So I would design the portrait view first and deal with the landscape later. I would prefer the portrait to cascade to landscape and not the other way.
However, having this order as a given, is there a way to “force” the portrait design on the landscape view, instead of starting from scratch?

Can anyone help me with this?
http://forum.webflow.com/t/responsive-dynamic-image-optimization/20156

Hi @LupoAsaf, there is not a way to automatically force the landscape view to inherit Portrait view styles. I am sorry about that. I would suggest to manually style each viewport as you need, the styles will persist with the styles you give at each of the viewports.

I you have a specific site you are working on and need some help with that, I would create a new post about the styling issue on mobile, and I am happy to take a look.

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.