Reformation Theme Mobile Makeover: Getting Single Product Cards and Ditching White Space

Hey store owners! Ever stared at your Shopify store on a phone and wished things just… fit better? Especially those product grids on mobile? It's a super common frustration, and one that recently popped up in the Shopify community forums, specifically regarding the popular Reformation theme.

Someone named siva_fds reached out, looking for a way to customize their product card sizes and get rid of some annoying white space in their collection sections. They were seeing two product cards side-by-side on mobile, and it just wasn't giving their products the prominence they deserved. Take a look at what they were seeing:

As siva_fds later clarified, they were specifically targeting the Collection Tabs section on their homepage, aiming for a single, larger product card per row when viewed on mobile devices. This is a brilliant goal, as it often leads to better user experience and clearer product presentation on smaller screens.

The Community Jumps In!

It didn't take long for other community members to chime in. Moeed quickly followed up, essentially asking if siva_fds had found a solution yet, and even provided an image showing the desired outcome: a single product card filling the width of the screen. This is exactly what we're aiming for!

Then, the real hero of the day, Wsp, stepped in with the actual code snippet that makes this magic happen. Sometimes, a simple CSS tweak is all it takes to transform your store's look and feel, especially on mobile.

The Solution: A Little CSS Magic!

Wsp's solution targets specific elements within the Reformation theme's Collection Tabs section, applying changes only when the screen size is 768px or smaller (which covers most mobile devices). Here's a breakdown of what the code does:

• @media screen and (max-width: 768px): This is a media query, telling the browser to apply these styles only when the screen width is 768 pixels or less. Perfect for mobile responsiveness!
• .collection-tabs .product-grid, .collection-tabs .grid, .collection-tabs__product-grid: These selectors pinpoint the main container holding your product cards within the Collection Tabs. It uses multiple selectors to ensure it catches all variations the theme might use.
• display: grid !important; grid-template-columns: 1fr !important; gap: 16px !important;: This is the core of the layout change. It sets the display to CSS Grid, and crucially, grid-template-columns: 1fr tells it to create a single flexible column. The gap: 16px adds some nice spacing between items. The !important flag is used to override any default styling the theme might have.
• .collection-tabs .grid__item, .collection-tabs .product-card, .collection-tabs__product-card: These selectors target the individual product cards themselves.
• width: 100% !important; max-width: 100% !important;: This ensures each product card takes up the full available width within its single column, making them larger and more prominent.
• .collection-tabs { padding-left: 12px !important; padding-right: 12px !important; }: This final touch helps to address the 'white space' issue siva_fds mentioned by adjusting the padding of the entire collection section, giving it a cleaner look edge-to-edge.

Here's the full code snippet:

 @media screen and (max-width: 768px) {

  
  .collection-tabs .product-grid,
  .collection-tabs .grid,
  .collection-tabs__product-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .collection-tabs .grid__item,
  .collection-tabs .product-card,
  .collection-tabs__product-card {
    width: 100% !important;
    max-width: 100% !important;
  }

  
  .collection-tabs {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}

Implementing the Fix: Step-by-Step

Ready to apply this to your own Reformation theme? Here's how you can do it:

1. Backup Your Theme: Before making any code changes, always, always, always duplicate your live theme. Go to Online Store > Themes, find your Reformation theme, click Actions > Duplicate. This way, if anything goes wrong, you have a safe version to revert to.
2. Access Theme Code: In your Shopify admin, navigate to Online Store > Themes. Next to your active theme, click Actions > Edit code.
3. Locate Your CSS File: In the left-hand sidebar, open the Assets folder. Look for a file named base.css or theme.css. These are common places for general styling. If you can't find either, you could also place it within your theme.liquid file just before the closing tag, wrapped in tags. However, adding it to a dedicated CSS file is generally cleaner.
4. Paste the Code: Scroll to the very bottom of your chosen CSS file (base.css or theme.css) and paste the entire code snippet provided above.
5. Save Changes: Click the 'Save' button in the top right corner of the code editor.
6. Test and Verify: Now, visit your Shopify store on a mobile device or use your browser's developer tools to simulate a mobile screen. Check the 'Collection Tabs' section on your homepage. You should now see single, larger product cards per row, and the white space should be reduced.
7. Clear Cache: If you don't see the changes immediately, try clearing your browser's cache or opening your store in an incognito/private browsing window. Sometimes browsers hold onto old versions of CSS files.

This little CSS snippet is a fantastic example of how a small, targeted change can make a big impact on your mobile experience. It not only addresses the specific aesthetic concern of product card sizing and whitespace but also enhances the overall usability for your mobile shoppers. It also highlights the power of the Shopify community – real store owners helping each other out with practical, actionable solutions. So next time you're stuck, remember there's a good chance someone else has faced the same challenge, and a solution might just be a forum post away!