DAWN THEME: MOBILE 2-COLUMN FORMAT

[skymochi]

Hi, i am trying to re-format my shop page from 1 column to 2.

However, I am struggling with the ratio as I’d like to squeeze 4 products when landing on the page.

My site is koredoko.com

and my end goal is like coucouintimates.com

Does anyone also know how to keep my product info always present, the product name and price only appear on hover,

[niraj_patel]

Hello @skymochi

You can add code by following these steps

1. Go to Online Store → Theme → Edit code.

2. Open your theme.liquid file

3. Paste the below code before on theme.liquid

@media screen and (max-width: 767px){ #shopify-section-template--15425262780489__product-grid .grid--1-col-tablet-down .grid__item{ width: 100%; max-width: 50% !important; } }

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

[Made4uo-Ribe]

Hi @skymochi

Check this one.

1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”
2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
3. In the “theme. Liquid” file. Find the tag and paste the code below before the tag.

• And Save.

• Result:

• 

  Mobile

• 

  Desktop.

• Note: tihs only work on the homepage collection.

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

[ZestardTech]

Hi @skymochi

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset > base.css and paste this at the bottom of the file:

@media (max-width: 768px){
#product-grid .grid__item {
width: 100%;
max-width: 50% !important;
border: solid 1px #000;
}
}

[skymochi]

Hi Niraj,

Thanks! This worked, do you know how to shorten each grid so that image is fully visible and ratio is closer to 4:5?

[skymochi]

Hi!

Thanks! This worked, do you know how to shorten each grid so that image is fully visible and ratio is closer to 4:5?

[niraj_patel]

You can add code by following these steps

1. Go to Online Store → Theme → Edit code.

2. Open your theme.liquid file

3. Paste the below code before on theme.liquid

@media screen and (max-width: 767px) { #shopify-section-template--15425262780489__product-grid .grid--1-col-tablet-down .grid__item { aspect-ratio: 4 / 5; } }

Was my reply helpful? Click Like to let me know!
Was your question answered? Please Mark it my both solution as Accepted Solution.