Changing Debut theme mobile grid

[TaskerandShaw]

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. 

[Zworthkey]

@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.

[TaskerandShaw]

www.taskerandshaw.com 
password: TASPW20221

Thanks 

[hammadCodes]

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

[TaskerandShaw]

www.taskerandshaw.com 
password: TASPW20221

Thanks 

[dmwwebartisan]

@TaskerandShaw 

Please share your store front password!

Thanks!

[tim]

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:

<div class="grid__item medium-up--one-third text-center small--one-half">

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 %}

  <div class="collection-grid">
    <ul class="grid grid--uniform">
      {% for block in section.blocks limit: section.blocks.size %}
        <li class="grid__item {{ grid_item_width }}" {{ block.shopify_attributes }}>
...

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...