How to adjust Debut theme mobile grid layout for feature columns?

Store Design
1

I’m trying to change the layout of the feature columns on mobile from 3 to 2 wide.

It’s currently set in CSS to

@media screen and (max-width: 750px) {
.grid__item.medium-up–one-third.text-center {
width: 33.3% !important;
}
}

when I change it to “up-one-half” and “50%” it changes to 2 columns but with gaps on every second line of images

What I’ve got at the moment.

IMG_5308.PNG
IMG_5308.PNG1284×2778 593 KB

2 Likes
2

@TaskerandShaw

Welcome to the Shopify community!
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

3

@TaskerandShaw Please share your shop password so I can have a look

4

@TaskerandShaw

Please share your store front password!

Thanks!

5

www.taskerandshaw.com
password: TASPW20221

Thanks

6

www.taskerandshaw.com
password: TASPW20221

Thanks

7

You should not mess with definitions of classes like medium-up–one-third as these may be used somewhere else on your site and this change may brake that layout. (maybe does not really apply to your case as your rule applies to elements which has 3 classes at once, but first 2 of them are always used together anyway).

Instead, you should select proper classes that will apply at different screen widths.

medium-up–xxx classes apply at width 750px and up.

For screen widths less than 750 you should use small–xxx classes.

So, your collection element should look like:

which is actually a default’ish code for Debut theme.

You may see it defined in your collection-list.liquid Section like this:

...
  {% case section.settings.grid %}
    {% when 2 %}
      {%- assign grid_item_width = 'medium-up--one-half' -%}
    {% when 3 %}
      {%- assign grid_item_width = 'small--one-half medium-up--one-third' -%}
    {% when 4 %}
      {%- assign grid_item_width = 'small--one-half medium-up--one-quarter' -%}
    {% when 5 %}
      {%- assign grid_item_width = 'small--one-half medium-up--one-fifth' -%}
  {% endcase %}

  
    

      {% for block in section.blocks limit: section.blocks.size %}
        - ...

If your code differs, you can always download a fresh copy of the theme from the theme store as a draft theme for reference. However, it may be a different version as Shopify does update their themes now and then…