How to change width on collection page for desktop but not mobile

luxoptions
Excursionist
44 0 6

Hi, I added this code for custom css on my collections page and I wanted it to change only the desktop width and not the mobile width. This is the code:

 

{ margin-top: 30px; margin-bottom: 0px; margin-left: 70px; margin-right: 70px; padding-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; }

 

Can someone help me with this?

Replies 7 (7)

lemondev
Shopify Partner
16 6 8

@luxoptions  Hello,


What class are you using for this css code ? 
You can do:

//You can manage the min-width based on your needs here.
@media screen and (min-width: 992px) {
//Here you place your css code for Desktop

.yourclass { margin-top: 30px; margin-bottom: 0px; margin-left: 70px; margin-right: 70px; padding-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; }
}

Hope it helps.

Daniel Neshkoski | CEO and Founder @ Lemon.Dev
luxoptions
Excursionist
44 0 6

I'm using this width change for the entire collection page. What class would I use for the entire page because right now it's not working. Here is my code

 

@media screen and (min-width: 992px) {
{ margin-top: 30px; margin-bottom: 0px; margin-left: 70px; margin-right: 70px; padding-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; }

}

lemondev
Shopify Partner
16 6 8

Hello @luxoptions , 

Can you share your website url? What theme are you using ? 
So you need to enter the class of the wrapped container and use it in order to work as I have shown you in the example.

Daniel Neshkoski | CEO and Founder @ Lemon.Dev
luxoptions
Excursionist
44 0 6

I'm using the flex fresh theme and the url is https://www.luxoptions.com/ but I am working on an unpublished theme

luxoptions
Excursionist
44 0 6

@lemondev also i am having trouble finding what class to use since i am using the margin change for the entire page.

lemondev
Shopify Partner
16 6 8

@luxoptions Maybe you can try on this class like this:

@media screen and (min-width: 992px) {

.collection-matrix{ margin-top: 30px; margin-bottom: 0px; margin-left: 70px; margin-right: 70px; padding-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; }
}


The ".collection-matrix" is the the container of your products, so I believe here you want to set those properties. 

Hope this helps.

Daniel Neshkoski | CEO and Founder @ Lemon.Dev
luxoptions
Excursionist
44 0 6

it's still not working for me. is this because i have a third party theme? @lemondev