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 · Accepted solution]

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 </body> on theme.liquid
<style>
@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;
  } 
}
</style>

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

[ZestardTech · Accepted solution]

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

[niraj_patel · Accepted solution]

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 </body> on theme.liquid
<style>
@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;
  } 
}
</style>

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

[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?

[niraj_patel · Accepted solution]

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 </body> on theme.liquid
<style>
@media screen and (max-width: 767px) {
#shopify-section-template--15425262780489__product-grid .grid--1-col-tablet-down .grid__item {
aspect-ratio: 4 / 5;
}
}
</style>

Was my reply helpful? Click Like to let me know!
Was your question answered? Please Mark it my both solution  as 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 </body> tag and paste the code below before the tag. 

<style>
@media screen and (min-width: 990px) {
.section-template--15425262780489__product-grid-padding .grid--3-col-desktop .grid__item {
    width: calc(25% - var(--grid-desktop-horizontal-spacing) * 2 / 4);
    max-width: calc(100vw / 4);
  }
}
@media screen and (max-width: 989px) {
.section-template--15425262780489__product-grid-padding .grid--3-col-desktop .grid__item {
    width: calc(50% - var(--grid-desktop-horizontal-spacing) * 2 / 3);
    max-width: calc(100vw / 2);
  }
}
</style>

• 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 · Accepted solution]

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!

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