Debut theme: One product per row on mobile

New Member
15 0 0

Hi there,

I'm trying to work out how to make the Debut theme show one product per row on the Debut theme on mobile.

I'm not familiar with SCSS (only CSS) so I'm strugling to understand how to edit the theme.scss file.

Any help would be greatly appreciated.

Many thanks in advance

0 Likes
New Member
15 0 0

I think this may do it (added at the bottom of theme.scss.

Is there any reason this isn't correct or may cause issues?

@include media-query($small) {
  .small--one-half {
    width:100%;
  }
}

 

0 Likes
Explorer
112 1 23

Hey Wilbo, can you link your site so I can check this out?

The easiest way to get Shopify help. Submit your task, get a quote, and we'll get the work done. Work with me at shupkeep.com
0 Likes
New Member
15 0 0

Hi there, sorry the site's not live yet - it's still in development.

0 Likes
Explorer
112 1 23

No problem. You can add a temporary password and post it here if you want me to double check it just in case, but if you have tested it out on both desktop and mobile and it looks good then ?

 

The easiest way to get Shopify help. Submit your task, get a quote, and we'll get the work done. Work with me at shupkeep.com
0 Likes
Tourist
11 0 2

Try to add on your themes css file the above:

@include media-query($small) {
  .small--one-half {
    width:100% !important;
  }
}

The "!important" overrights the default value of a css attribute, with the value you want to.

Hope it helps!

 

Best,

Vicky

Vicky
Software Engineer
0 Likes
Shopify Partner
12 0 5

Forcing your .small--one-half to 100% width isn't a good idea.

It means that if anything else on your theme that is set to display 2 divs next to each other on one line (on small displays) would now be spread across 2 lines. As you're forcing all small--one-half elements to be 100% instead of 50%.

You'd also be using the words "one-half" to describe "one-whole" which will get confusing in 3 months when you need to add something else.

If you add a temporary password to the store and share the link in here then people will have a lot more to work with to be able to help you.

0 Likes
Shopify Partner
3 0 6

Go to Themes > Edit Code

To show 1 product per row on mobile:

1. Under Sections open collection.liquid

2. Search for `small--one-half` and change them to `small--one-whole`

3. Click Save

To show 1 collection per row on mobile:

1. Under Sections open collection-list.liquid

2. Search for `small--one-half` and change them to `small--one-whole`

3. Click Save

2 Likes
New Member
1 0 0

Works perfectly, thanks!


@gianfaye wrote:

Go to Themes > Edit Code

To show 1 product per row on mobile:

1. Under Sections open collection.liquid

2. Search for `small--one-half` and change them to `small--one-whole`

3. Click Save

To show 1 collection per row on mobile:

1. Under Sections open collection-list.liquid

2. Search for `small--one-half` and change them to `small--one-whole`

3. Click Save



@gianfaye wrote:

Go to Themes > Edit Code

To show 1 product per row on mobile:

1. Under Sections open collection.liquid

2. Search for `small--one-half` and change them to `small--one-whole`

3. Click Save

To show 1 collection per row on mobile:

1. Under Sections open collection-list.liquid

2. Search for `small--one-half` and change them to `small--one-whole`

3. Click Save


 

0 Likes
Excursionist
11 0 1

Hello Gianfaye, that seems a good idea that should work. But in my case it is not. 

 

I also want to show only one column in mobile view with the debut theme for collections. And 3 columns in desktop. 

 

So I made the changes, so the collection-list.liquid end up looking like this

 

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

 

But still not working. Seems like something is missing, or maybe just need some time like for cache issues. Not sure. 

 

Kind regards. 

0 Likes