How to have 2 columns on the product page on mobile?

On 3/19/2022 at 12:43 AM, tuanphan said:

Add to Design > Custom CSS

/* Ijorere 20 mobile */
@media screen and (max-width:640px) {
body#collection-6233165380b20b5199526d0f {
section.ProductList div.ProductList-item.hentry.image-is-loaded {
    width: calc(33.3333% - 20px) !important;
    clear: none !important;
}
div.ProductList-item:nth-child(3n+1) {
    clear: left !important;
}}}

 

hello, I know I'm about a year late but I wanted to ask if you can help me.

Your code works to give me two columns but they're small both text and images 

can you help me make them larger

On 9/10/2023 at 9:50 AM, Albertm said:

hello, I know I'm about a year late but I wanted to ask if you can help me.

Your code works to give me two columns but they're small both text and images 

can you help me make them larger

That code is make item 33% - 20px width, so you need to change to 50%, you can try this new code

/* Ijorere 20 mobile */
@media screen and (max-width:640px) {
body#collection-6233165380b20b5199526d0f {
section.ProductList div.ProductList-item.hentry.image-is-loaded {
    width: calc(~"50% - 20px") !important;
    clear: none !important;
}
div.ProductList-item:nth-child(3n+1) {
    clear: left !important;
}}}

if it doesn't work, try 45%

If it still doesn't work, can you share url again? We will check it again

My product page only has 1 column where I want it to be 2 columns, 2 images side by side on mobile. It used to be 2 but now it’s changed and I can’t seem to fix it. Any help would be greatly appreciated! Thanks everyone 🫶🏼

This problem has been answered a lot recently

Remove the CSS code that includes width:48%; and replace it with this:

@media only screen and (max-width: 767px) {
  .products.collection-content-wrapper .list-grid {
    grid-template-columns: 1fr 1fr;
  }
  .products.collection-content-wrapper .grid-main-meta .grid-title {
    font-size: 1.4em;
  }
}

Yes that worked, thank you so much Ziggy!

1 minute ago, DaronP said:

Yes that worked, thank you so much Ziggy!

Glad that worked for you! Thanks for the like and solution!