Changing Debut theme mobile grid

TaskerandShaw
Excursionist
30 0 7

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
Replies 6 (6)
Zworthkey
Shopify Partner
5581 640 1498

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

If helpful, please Like and Accept Solution. Hire Us |
if you Want to modify or Customize your theme | Whatsapp | Email us: sales@zworthkey.com
Top Rated Shopify Agency, | We have Over 200+ Happy merchants.
Build Successful Shopify Stores with GemPages
hammad00033
Shopify Partner
30 7 2

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

Want to modify or custom changes to the Shopify store? Then hire us.
Email: contact.ecomvita@gmail.com , Skype: hammad00033 , Webiste: https://hammad.live/
If helpful then please Like and Accept the Solution.
Shopify Expert | Founder & CEO --- eComVita
dmwwebartisan
Shopify Partner
10710 2337 3311

@TaskerandShaw 

Please share your store front password!

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
TaskerandShaw
Excursionist
30 0 7

www.taskerandshaw.com 
password: TASPW20221

 

Thanks 

TaskerandShaw
Excursionist
30 0 7

www.taskerandshaw.com 
password: TASPW20221

 

Thanks 

tim
Shopify Expert
3040 170 1093

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

 

 

 

 

My post solved your problem? Like it!