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

Store Design

Topic summary

Goal: change collection page margins on desktop only, without affecting mobile.

  • The initial CSS sets margins/padding but has no selector, so it can’t target the collection page specifically.
  • A suggestion was made to wrap the styles in a desktop media query (@media screen and (min-width: 992px)) and apply them to a specific class.
  • The user wants it to apply to the entire collection page; their attempt used a media query with “(min -width: 992px)” and no selector, and it didn’t work.
  • Theme details: Flex Fresh theme, unpublished. The user struggles to find the right class.
  • Proposed selector: .collection-matrix (product grid container) within the desktop media query.
  • The user reports it still doesn’t work and wonders if the third‑party theme is the cause.

Status: unresolved.

Open items and next steps:

  • Identify the correct container/page-level selector in the Flex Fresh collection template (inspect DOM with browser dev tools).
  • Ensure the CSS is added to the unpublished theme’s active stylesheet and not overridden by specificity.
  • Verify media query syntax and that “min-width” has no space.
  • Test with !important if necessary to override theme styles.
Summarized with AI on February 13. AI used: gpt-5.
1

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?

2

@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.

3

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; }

}

4

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.

5

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

6

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

7

@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.

8

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