Title: Bug in Additional CSS? @media (max-width:
Last modified: April 4, 2021

---

# Bug in Additional CSS? @media (max-width:

 *  Resolved [temporalnaut](https://wordpress.org/support/users/temporalnaut/)
 * (@temporalnaut)
 * [5 years, 2 months ago](https://wordpress.org/support/topic/bug-in-additional-css-media-max-width/)
 * I found that when I add something like this in Additional CSS (code that has 
   a parameter **[@media](https://wordpress.org/support/users/media/) (max-width:
   480px)**), so even if the code is closed with the characters “}”, all other codes
   that are below this behave as if they also had the parameter [@media](https://wordpress.org/support/users/media/)(
   max-width: 480px)
 *     ```
       @media (max-width: 480px), only screen and (orientation: portrait) {
   
       .elementor-element .elementor-wc-products .woocommerce[class*=columns-] ul.products li.product { 
       margin-bottom: 20px !important;
       }
       }
       ```
   
 * The question is, am I making a mistake and the code doesn’t end properly or is
   it a bug? I use Wordpres 5.7, I tried to turn off plugins and set the default
   theme.
    Thank you

Viewing 2 replies - 1 through 2 (of 2 total)

 *  [Vlad](https://wordpress.org/support/users/vladytimy/)
 * (@vladytimy)
 * [5 years, 2 months ago](https://wordpress.org/support/topic/bug-in-additional-css-media-max-width/#post-14274135)
 * Hi, [@temporalnaut](https://wordpress.org/support/users/temporalnaut/)
 * I tested your CSS snippet and everything that is included in the block applies
   to all widths and rules overwrite in a bad way.
 * According to [https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#combining_multiple_types_or_features](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#combining_multiple_types_or_features)
 * combining features in `@media` should look like this:
 *     ```
       @media only screen and (max-width: 480px) and (orientation: portrait) {
   
          .elementor-element .elementor-wc-products .woocommerce[class*=columns-] ul.products li.product { 
           margin-bottom: 20px !important;
          }
   
       }
       ```
   
 * Also this might help you: [https://www.w3schools.com/cssref/css3_pr_mediaquery.asp](https://www.w3schools.com/cssref/css3_pr_mediaquery.asp)
 * I’m pretty sure this is not a WordPress core issue. If you’re using the correct
   selectors and you still have issues, you’ll want to contact your theme developer–
   that’s controlling how your website looks.
 * Hope this helps,
    Kind regards!
 *  Thread Starter [temporalnaut](https://wordpress.org/support/users/temporalnaut/)
 * (@temporalnaut)
 * [5 years, 2 months ago](https://wordpress.org/support/topic/bug-in-additional-css-media-max-width/#post-14275276)
 * Thank you, you’re right they were selectors, I set it according to your example
   and it works properly.

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘Bug in Additional CSS? @media (max-width:’ is closed to new replies.

 * In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/)
 * 2 replies
 * 2 participants
 * Last reply from: [temporalnaut](https://wordpress.org/support/users/temporalnaut/)
 * Last activity: [5 years, 2 months ago](https://wordpress.org/support/topic/bug-in-additional-css-media-max-width/#post-14275276)
 * Status: resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics