# Media queries with more than 2 levels

**URL:** <https://forum.bootstrapstudio.io/t/media-queries-with-more-than-2-levels/9662>\
**Category:** Bug Reports\
**Created:** [November 27, 2022, 9:08pm UTC](https://forum.bootstrapstudio.io/t/media-queries-with-more-than-2-levels/9662 "2022-11-27T21:08:07Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![NBX](https://forum.bootstrapstudio.io/user_avatar/forum.bootstrapstudio.io/nbx/32/2495_2.png) [@NBX](https://forum.bootstrapstudio.io/u/NBX)\
**Post date:** [November 27, 2022, 9:08pm UTC](https://forum.bootstrapstudio.io/t/media-queries-with-more-than-2-levels/9662/1 "2022-11-27T21:08:07Z")

</div>

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;

}

```

}}

---

<div class="post-metadata">

**Author:** ![twinstream](https://forum.bootstrapstudio.io/letter_avatar_proxy/v4/letter/t/ecae2f/32.png) [@twinstream](https://forum.bootstrapstudio.io/u/twinstream)\
**Post date:** [November 28, 2022, 3:46am UTC](https://forum.bootstrapstudio.io/t/media-queries-with-more-than-2-levels/9662/2 "2022-11-28T03:46:15Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![NBX](https://forum.bootstrapstudio.io/user_avatar/forum.bootstrapstudio.io/nbx/32/2495_2.png) [@NBX](https://forum.bootstrapstudio.io/u/NBX)\
**Post date:** [November 28, 2022, 7:37pm UTC](https://forum.bootstrapstudio.io/t/media-queries-with-more-than-2-levels/9662/3 "2022-11-28T19:37:47Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![richards](https://forum.bootstrapstudio.io/user_avatar/forum.bootstrapstudio.io/richards/32/3163_2.png) [@richards](https://forum.bootstrapstudio.io/u/richards)\
**Post date:** [November 29, 2022, 6:08pm UTC](https://forum.bootstrapstudio.io/t/media-queries-with-more-than-2-levels/9662/4 "2022-11-29T18:08:53Z")

</div>

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.