Help - Mobile Columns Width

Shopify Discussion
, ,
1

Guys,

I need some help i have been trying to figure out a solution all night.

This section on the page Filter Coffee | Shop Premium Coffee Online – Sprociety

So the desktop view is great, and if i stack it vertically for mobile it works great too.

However, i want it for mobile view to stack horizontally two columns wide.

it does this, but when the mobile screen is above 397px, it breaks, and mobile view shows it 3 columns wide, and then the last and final columns breaks and shows down over the top of another section.

how do i make this section show horizontally on mobile, and keep it 2 columns wide for any width up until 749px.

if you can figure this out i will be so impressed and appreciative

image
image1920×882 185 KB

2

Hi @RankConvert

In your Shopify Admin go to online store > themes > actions > edit code
Find Asset > base.css and paste this at the bottow of the file:

@media screen and (max-width: 749px) {
  .product-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
  }

  .product-grid__item {
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
  }
}

If the theme is still forcing 3 columns, you may also need:

@media screen and (max-width: 749px) {
  .product-grid {
    --mobile-columns: 2 !important;
  }
}

Best regards,
Devcoder :laptop:

3

brother it is not a product grid what you are seeing, it is a parent group with 4 subgroups - i am using horizon editor

4

Hi @RankConvert

Where exactly are you experiencing the issue? Could you please send me a screenshot so I can take a look?

5

Look up CSS Subgrid, it’ll probably help you out. You could possibly even set the amount of columns with a media query. Although, isn’t that also possible in the theme editor?

6

its screenshotted above and i provided the link - is that what you mean?