Allow for screen size/responsive styling

[annezazu]

What problem does this address?

Currently, there's not a way to style items based on screen size. For example, if I want to hide an image when my site is viewed on mobile, I have to use custom CSS. This is a common use case for many site builders and came up as a question as part of this FSE program effort. Currently, we only allow for previewing based on the screen size:

preview.devices.mov

I couldn't find a similar issue mentioned already so, if this has already been discussed somewhere, apologies!

What is your proposed solution?

Enable device specific styling/settings in block settings. Here's an example from Elementor: https://elementor.com/help/mobile-editing/

[overclokk]

This could be usefull but it should be a theme choices with for example add_theme_support(), and so I can select to have 3 or 4 breaking point (Bootstrap CSS has 4).

[leph83]

When coding the header in my custom theme, I prefer to use flexbox or display grid instead of creating columns. That way I don't need a breakpoint, because the content will just wrap, if there's not enough space. Also no need to adjust the column width depending on the amount of navigation items.
But yeah, you still need at least one breakpoint to switch from mobile nav to desktop nav.

As a user I would prefer to create two headers. One for mobile and one for desktop with the possibility to define the breakpoint in the editor.

[kjellr]

Related Issues:
#19909
#13363

(This may actually be a duplicate of one of those?)

[annezazu]

Amazing - thanks for connecting these dots. I tried hard to find related issues when I originally posted this but came up empty at the time! Going to close this out and add a few more labels to the other issues.

[sinanisler]

related to this issue, lets continue here
#55619