Having two products appear side by side on mobile in 7.1

Site URL: https://www.periodicoemporium.com/

Hi,

I am trying to get two products to appear side by side on mobile for my homepage and other main pages throughout the site. I checked the forum and the following code was listed:

@media only screen and (max-width:640px) {
.products .list-grid {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.products .grid-item {
width: 48%;
}
}

However, I have tried this and it still doesn't work. Does anyone have any other ideas?

Thanks,

Nadia

I also used this code as a someone said it was a fix and it didn't work either:

<style>
  @media screen and (max-width:763px) {
.products.collection-content-wrapper .list-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    grid-column-gap: 5px;
    grid-row-gap: 5px;
}
}
</style>

On 7/29/2021 at 3:57 AM, PeriodicoEmporium said:

I also used this code as a someone said it was a fix and it didn't work either:

<style>
  @media screen and (max-width:763px) {
.products.collection-content-wrapper .list-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    grid-column-gap: 5px;
    grid-row-gap: 5px;
}
}
</style>

With homepage, add this to Design > Custom CSS

/* home 2 products row */
@media screen and (max-width:767px) {
div#page-section-6101a639f637f965fb180af8 .span-3 {
    width: 50% !important;
    float: left !important;
}
div#page-section-6101a639f637f965fb180af8 .span-3:nth-child(2n+1) {
    clear: left !important;
}
}

Can you share link to other pages?

Oh my goodness! That worked. Thank you sooo much! 🙂

On 7/30/2021 at 7:39 PM, PeriodicoEmporium said:

Oh my goodness! That worked. Thank you sooo much! 🙂

Do you still need help with other pages? Can you share their urls?

Sorry for the late reply tuanphan. I have only just seen your other message as my account was playing up. it worked really well so thank you. 

I still cannot get this to work for me @tuanphan 😞

My site is thenakedproject.com.au

4 hours ago, thenakedproject said:

I still cannot get this to work for me @tuanphan 😞

My site is thenakedproject.com.au

You mean products on this page? https://thenakedproject.com.au/store/empowered

@tuanphanmay you help with my site? https://www.avdcmty.com/shop would like mobile to be 2 on each row instead of stacked - thank you 

2 hours ago, cristianmanuel said:

@tuanphanmay you help with my site? https://www.avdcmty.com/shop would like mobile to be 2 on each row instead of stacked - thank you 

Add this to Website Tools (under Not Linked) > Custom CSS

@media screen and (max-width:640px) {
.ProductList-grid {
    display: grid;
    grid-template-columns: repeat(2,1fr);
}
}

@tuanphanthank you so much, wishing you a great year!