Media queries with more than 2 levels

I need to fix an issue in iOS Safari. Apparently, that browser doesn’t like background-attachment: fixed. I tried to apply a fix that I found, but it was stripped out on export. Removing the @supports level seemed to work fine, but might be an issue worth looking into. Thanks!

CSS code that was removed:
@media not all and (min-resolution:.001dpcm)
{ @supports (-webkit-appearance:none) {

#hero.safari_only {

background-attachment: scroll;

}

}}

It exports fine using a SCSS file. Could be because a regular CSS file does permit nesting css ?

I have to admit. I don’t use SCSS. That’s what I get for using some random code on the Internet. Thanks for the reply!

In the design tab create a new scss file (right click styles) and put your code in there, on export it should compile the code as css.

2 Likes