How do i change my rows on collections page from 2 down to 1?

Topic summary

Mobile collection pages in the Shopify Showtime theme were showing two products per row; the goal was to switch to a single product per row. Changing the theme setting to “1 column” did not affect the mobile layout.

Multiple solutions were suggested, all using custom CSS. Some advised adding CSS directly in theme.liquid before the closing . Another provided a concrete media query targeting mobile widths (e.g., max-width around 749px) to set product grid items to 100% width with !important, and recommended placing it at the end of styles.css.

Technical context: A CSS media query lets styles apply only on small screens, and forcing grid items to 100% width results in one product per row. theme.liquid is the main layout file where global code can be injected, while styles.css is the primary stylesheet for persistent styling.

Outcome: The original poster confirmed the solutions worked and expressed appreciation. The issue is resolved, with no outstanding questions. Images were shared for context but were not required to understand the fix.

Summarized with AI on January 30. AI used: gpt-5.

Hi,

I’m using showtime theme on our website www.loveyourbed.co.uk. On mobile there is 2 rows of products, however i would like to change this to just one. I cant find the solution to this. I have got it to state there is 1 column on the settings but this doesn’t make a difference. Can anyone help me with this?

This is how it currently looks at the moment,

Regards

Peter

Hello @Ellie123

Go to Online Store → Theme → Edit code → theme.liquid

Copy and Paste the below code before


Hello @Ellie123

It’s GemPages support team and glad to support you today.

I would like to give you a solution to support you.

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid theme file.

  3. Paste the below code before :


Hope my solution can work and support you!

Kind & Best regards!

GemPages Support Team.

@Ellie123 - add this css to the very end of your styles.css file and check

@media only screen and (max-width: 749px)  {
.collection-grid .col-lg-6.col-md-6.col-sm-6.col-xs-6.element.mb30{width: 100%!important;}
}

Superb, they all work, thanks for the replies, much apprecaited!