New Shopify Certification now available: Liquid Storefronts for Theme Developers

How to properly wrap specific code in media query?

Solved
JhordanMSUITE
Shopify Partner
114 1 38

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?

 

Screenshot 2023-10-09 at 11.13.31 AM.png

 

 

 

@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

 

 

 

 

Accepted Solutions (2)
PageFly-Henry
Globetrotter
519 132 106

This is an 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

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

View solution in original post

Made4uo-Ribe
Shopify Partner
4222 977 1189

This is an 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;
   }
}

 

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


View solution in original post

Replies 2 (2)
PageFly-Henry
Globetrotter
519 132 106

This is an 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

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

Made4uo-Ribe
Shopify Partner
4222 977 1189

This is an 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;
   }
}

 

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com