Debut Theme - two collections images per row on mobile

JamesBish
New Member
10 0 0

Hello,

I am trying to achieve two collection images on mobile AND desktop.

Currently on mobile the collection images are large and one above the other as you flick down, I would like to get the two collection images displayed side by side.

Any ideas on how I can achieve this would be much appreciated.

Thanks

JB

0 Likes

Hi @JamesBish , I think it has something to do with the grid system. You may have to change the product class name to "small--one-half medium-up--one-half", I have a video talking about how to change the layout of the collection, https://youtu.be/bfyzKnOK8NY The layout in the video may be different from yours but the idea is similar, it should be too hard to figure it out. Please let me know how it goes.

Visit my Shopify Youtube channel to learn how to code your Shopify store and fix various coding issues on Shopify.(subscribe if you like it :)).
Glad to help out and wish your Shopify store great success.
0 Likes
JamesBish
New Member
10 0 0
Hi DeepCode,

Thanks for your help and swift response. I have actually tried that after
reading another thread on the topic but unfortunately it hasn't seem to
make any difference. Here's my current code, can you see any mistakes I've
made?:

[image: Screenshot 2021-01-31 at 18.05.58.png]

Another bit of advice I read that did display two collection 2 on a row
mobile BUT it caused subsequent issues throughout the rest of the website
as most of the content populated only on one half of the mobile screen, was
this:

@_media only screen and (max-width: 480px) {.grid__item {
width: 50% !important;


Any ideas?

Many thanks
James
0 Likes
JamesBish
New Member
10 0 0

Hi DeepCode,

Thanks for your help and swift response. I have actually tried that after
reading another thread on the topic but unfortunately it hasn't seem to
make any difference. Here's my current code, can you see any mistakes I've
made?:

Screenshot 2021-01-31 at 18.14.40.png
Another bit of advice I read that did display two collection 2 on a row mobile BUT it caused subsequent issues throughout the rest of the website as most of the content populated only on one half of the mobile screen, was this:

Screenshot 2021-01-31 at 18.15.49.png

Any ideas?

Many thanks
Jb

0 Likes

Maybe try to change everything to "small--one-half medium--one-half"? since I am not sure what is "section.settings.grid" for your store

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

 

Visit my Shopify Youtube channel to learn how to code your Shopify store and fix various coding issues on Shopify.(subscribe if you like it :)).
Glad to help out and wish your Shopify store great success.
0 Likes
JamesBish
New Member
10 0 0

Thanks again for your help, but unfortunately that doesn't seem to have made a difference.

As you refer to 'section.settings.grid' in your previous message I have pasted in below what it is on my store. Does that help at all?

{% case section.settings.grid %}
{% when 2 %}
{%- assign max_height = 530 -%}
{% when 3 %}
{%- assign max_height = 345 -%}
{% when 4 %}
{%- assign max_height = 250 -%}
{% when 5 %}
{%- assign max_height = 195 -%}
{% endcase %}

{% if section.settings.layout == 'grid' %}
{%- assign limit = section.settings.grid | times: section.settings.rows -%}
{% else %}
{%- assign limit = 16 -%}
{% endif %}

{% paginate collection.products by limit %}

 

Thanks again!

James

0 Likes
suyash1
Shopify Partner
1995 205 304

@JamesBish - can you please share collection page link? we can do it using css

you are welcome to contact me.
My email - suyash.patankar@gmail.com

#1 page builder app on Shopify - for FREE! PageFly

My timezone is GMT+5:30
0 Likes
JamesBish
New Member
10 0 0

Hi Suyash,

Thanks for your help.

Its behind a password as we are launching on 3rd Feb, do you need the password?

https://www.loveloxlockets.com/

Thanks

J

0 Likes
suyash1
Shopify Partner
1995 205 304

Hello, yes will need the password.

 

you are welcome to contact me.
My email - suyash.patankar@gmail.com

#1 page builder app on Shopify - for FREE! PageFly

My timezone is GMT+5:30
0 Likes
JamesBish
New Member
10 0 0

LAUNCH

0 Likes