Custom CSS per breakpoint

Hi,

Is it possible to have different custom css box per breakpoint? So the custom css box in a block
automatically handle the css according to the breakpoint.

image

1 Like

Yes please, having to manually program media queries is a bit tedious :wink:

This is a great implementation.

Hi @Louis,

In spotlight #2 you proposed an option for media query styles to be set by cwicly defined media types: ##desktop##, ##tablet## and ##mobile##. To your request for input on this, I would like to say this is a good option if the breakpoint values are not known or important to the cwicly user. That is your code will subsitute the required media selector for the variable: desktop, tablet or mobile. However, to use matching breakpoints manually, the actual breakpoint values for the three devices need to be known. I would be happy adding media queries to custom css manually, with knowledge of the cwicly breakpoint values. For example,

@media only screen and (min-width: 600px) and (max-width: 800px) {
body {
background-color: lightblue;
}
}

1 Like

Hi @Anthony,

Thanks for taking the time to write down your suggestions here.

Great point!
Those shortcuts will always be optional and the possibility to write manual media queries won’t be changed for block custom CSS or global stylesheets;

But your comment does point to the fact that we should make sure that the user also has access to the tablet and mobile (and in the future custom ones) breakpoint values that are defined in the Global Styles panel, which would dynamically react to changes.

We’ll hopefully be able to go over this in our next Spotlight in more detail :slight_smile:

Cheers,

1 Like