How to configure 2 column layout on tablet and single on mobile?

Shopify Discussion

Topic summary

A user seeks to implement a responsive layout displaying 2 columns on tablets and a single column on mobile devices for their Shopify store.

Proposed Solutions:

Multiple respondents offered CSS-based approaches:

  • Media query targeting tablets (768px-1024px): Add CSS to base.css adjusting .products .product-card width to create 2-column layouts
  • Mobile breakpoint (max-width: 481px or 950px): Set product card width to calc(100% - 40px) for single-column display
  • Implementation location: Most suggest adding code to base.css file in the Assets folder, though one recommends theme.liquid above the </body> tag

Technical Note:
Several code snippets and images appear corrupted or reversed in the original thread, making exact implementation details unclear. The core approach involves using CSS media queries with calculated widths and margins to control product card layouts at different screen sizes.

Status: Multiple solutions provided but no confirmation from the original poster on which approach worked or if the issue was resolved.

Summarized with AI on November 19. AI used: claude-sonnet-4-5-20250929.
1

i want to make 2 column on tablet and single on mobile:

link to my website: https://djdropsonline.com/collections/au
pass: showff

1 Like
2

Hey @s1media

Follow these Steps:

  1. Go to Online Store
  2. Edit Code
  3. Find theme.liquid file
  4. Add the following code in the bottom of the file above tag.

Moeed_0-1686168187739.png
Moeed_0-1686168187739.png377×821 112 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

3

@s1media

From your Admin panel, click Online Store > Themes >Actions > Edit code
find and open the base.css file
Paste the code below at the very bottom of the file.

@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 2) {
    .products .product-card {
        width: calc(50% - 40px) !important;
    }
}

@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 750px)
  and (-webkit-min-device-pixel-ratio: 2) {
    .products .product-card {
        width: calc(98% - 20px) !important;
    }
}
4

Hi @s1media

You can make the images responsive according to tablet and mobile by following the instructions below

  1. From you Admin page, go to Online store > Themes > Click the three dots on the theme you want to edit > Edit code
  2. Go to Asset folder and open the base.css file
  3. At very end of the code, add the code below
@media only screen and (max-width: 950px){
.products .product-card {
    margin: 0 20px 20px;
    width: calc(50% - 40px);
}
}

@media only screen and (max-width: 481px){
.products .product-card {
    margin: 0 20px 20px;
    width: calc(100% - 40px);
}
}

made4Uo_1-1686169566310.png
made4Uo_1-1686169566310.png1024×923 151 KB

made4Uo_0-1686169550986.png
made4Uo_0-1686169550986.png728×914 172 KB

5

@s1media ,

  1. In your Shopify Admin go to online store > themes > actions > edit code

  2. In your theme.liquid file, find the **(press CTRL + F or command + F on Mac)

  3. paste this code right above the tag:

If it helps you please click on the “like” button and mark this answer as a solution!

Thank you.

Kind regards,
Diego