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

Technical Q&A
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!

2

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.

1 Like
3

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

unnamed (7).jpg
unnamed (7).jpg4032×3024 890 KB

4

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.

1 Like
5

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

IMG-4136.jpg
IMG-4136.jpg4032×3024 5.48 MB

6

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.