How to properly wrap specific code in media query?

[JhordanMSUITE]

Hello, I need assistance. I am trying to wrap a specific code in a media query to make "mobile only" customizations. When I try, desktop is affected and other technical issues begin to arise. I am trying to simply move the "filters" title back into the viewport on mobile. This works when make margin-left: 0px; but it totally messes up everything I created on the desktop view. What is the proper way to wrap this code, so desktop settings won't be affected?

@media only screen and (max-width:777px)
{:where(.listing-page,.search-page) .intro .filter>summary {
    padding: var(--padding);
    margin-left: 0vw;
}

https://2d26b3.myshopify.com/collections/all

pw: reishi

[PageFly-Henry · Accepted solution]

Hi @JhordanMSUITE 

This is Henry from PageFly - Landing Page Builder App

You can try this code by following these steps: 

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file app.css

Step 3: Paste the below code at bottom of the file -> Save

@media (max-width: 767px){

:where(.listing-page,.search-page) .intro .filter>summary {

    margin-left: 0 !important;

}}

Hope that my solution works for you.

Best regards,

Henry | PageFly

[PageFly-Henry · Accepted solution]

Hi @JhordanMSUITE 

This is Henry from PageFly - Landing Page Builder App

You can try this code by following these steps: 

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file app.css

Step 3: Paste the below code at bottom of the file -> Save

@media (max-width: 767px){

:where(.listing-page,.search-page) .intro .filter>summary {

    margin-left: 0 !important;

}}

Hope that my solution works for you.

Best regards,

Henry | PageFly

[Made4uo-Ribe · Accepted solution]

Hi @JhordanMSUITE 

You are missing a closing curly bracket. 

@media only screen and (max-width:777px) {
   :where(.listing-page,.search-page) .intro .filter>summary {
       padding: var(--padding);
       margin-left: 0vw;
   }
}