Correct The 2 Columns Layout On Mobile So That The Size Adjusts Based On Screen Size

Yusa1
Excursionist
46 0 1

Hello,

I'm trying to correct the 2 columns layout on mobile so that the size adjusts based on screen size

Here an example of what i'm referring too down below on the video.  Website - https://avokitchen.com/

 

PROBLEM - https://share.getcloudapp.com/9Zuyx4wN

Any help I will gladly appreciated!

Replies 5 (5)

dannyelo
Shopify Partner
180 37 36

Hello!

 

You need to add this min-with: 100; property to the class on your css stylesheet.

 

.product-grid .grid__item {
  padding-bottom: 1rem;
  /* Add this min-width: 100%; property */
  min-width: 100%;
}

 

Hope it helps.

❤️ Enjoyed my Shopify customization assistance? If I've helped you achieve your goals, consider showing your appreciation with a coffee tip! It means the world to me! ️ Thank you!
Buy me a coffee here
Yusa1
Excursionist
46 0 1

I tried it and this happen instead picture below. Still need help regarding this issue.

unnamed (7).jpg

dannyelo
Shopify Partner
180 37 36

Find the class .grid__item and remove this property:

 

.grid__item {
  /* Delete this width property */
  width: calc(25% - 0.375rem);
}

 

That should fix the issue completely.

 

Let me know.

❤️ Enjoyed my Shopify customization assistance? If I've helped you achieve your goals, consider showing your appreciation with a coffee tip! It means the world to me! ️ Thank you!
Buy me a coffee here
Yusa1
Excursionist
46 0 1

I'm kind of struggling understanding where i have to go. This what I have done.

IMG-4136.jpg

dannyelo
Shopify Partner
180 37 36

Hello Yusa,

 

I found the problem.

 

You need to also find this piece of code and change:

max-with: 33.33% !important;

To..

min-with: 33.33% !important;

 

Should look like this:

@media screen and (min-width: 750px) {
  ul#product-grid li.grid__item {
    min-width: 33.3%!important;
  }
}

 

Always when you add custom css, put it at the bottom of the file. Because if the class is repeated in the file it will overwirte your custom code.

❤️ Enjoyed my Shopify customization assistance? If I've helped you achieve your goals, consider showing your appreciation with a coffee tip! It means the world to me! ️ Thank you!
Buy me a coffee here