Display 3 items per row

winnado11
Explorer
50 0 24

winnado11_0-1636795534502.png

 

Hello, 

For the "How It Works" section, there are currently 3 columns, 2 rows on the desktop version. For the mobile version, I chose the "Grid" function. I am wondering what I can do to make them displayed in the same way as what it was in the desktop version (like 3 columns 2 rows, pictures on the first row, and text on the second rows. . Currently, the way it shows on the mobile looks messed up. 

 

Here is my website: https://wowberrybites.myshopify.com/

 

Thanks!

Replies 2 (2)
Natztech
Shopify Partner
2238 565 1373

hello @winnado11 

please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

@media screen and (max-width: 759px){
#shopify-section-1623276090444d7601 .custom-content__blocks {
    grid-template-columns: auto auto auto;
}
#shopify-section-1623276090444d7601 .custom-content__item--one_third {
    grid-column: unset;
}
#shopify-section-1623276090444d7601 .custom-content__text  .custom-content__text-title{
    font-size: 14px;
}
}

 

winnado11
Explorer
50 0 24

Hello @Natztech , 

Thank you for your help. I actually changed my mind and edited their location. Do you know how I can make them into one row on the desktop version? And 3 rows 2 colums - 2 items each row (1 image 1 text) on the mobile version?

 

Thanks in advance.