2 Products per row on Mobile view

Site URL: https://www.ghoulsmagazine.com/film-reviews

Hello,

at the bottom of this page https://www.ghoulsmagazine.com/film-reviews

I have a summary block pulling from my shop at the bottom of the page. I'd like to have 2 products per row on the mobile view but I'm struggling to make it work. Does anybody know if this can be achieved please?

thanks a lot

I am having the issue and raised a case with Square space support as seems the images do not render as 2 images on the mobile i have tried everything 

Add to Home > Design > Custom CSS

/* products 2 columns */
@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1609512364464_27908 .summary-item-list {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    grid-column-gap: 10px;
    grid-row-gap: 10px;
}
}

Can you share site url? We can help easier @Arif_79

2 hours ago, Arif_79 said:

I am having the issue and raised a case with Square space support as seems the images do not render as 2 images on the mobile i have tried everything 

Hi @tuanphan and thanks a lot. The above code worked on that page.

However, when i select one of the three top button which link to a filter view, the products display again 1 image at the time on mobile.

https://www.ghoulsmagazine.com/blog?category=Thriller

https://www.ghoulsmagazine.com/blog?category=Horror

https://www.ghoulsmagazine.com/blog?category=Sci-Fi

Is there a way to have this fixed for these pages as well please?

Got it, I've found the block_yui for that section 🙂

I'm having similar troubles.  Figured out the code for the "pacifiers" page, but not for the 4 product blocks on the main home page. I'd like to have them stack 2x2 on the homepage. Help?

10 hours ago, mljp said:

I'm having similar troubles.  Figured out the code for the "pacifiers" page, but not for the 4 product blocks on the main home page. I'd like to have them stack 2x2 on the homepage. Help?

Can you share link to your site?

On 8/22/2021 at 4:09 AM, tuanphan said:

Can you share link to your site?

Yes, www.oopsiedaizee.com.  I ended up just getting rid of the main page for ease of navigation - but could you tell me how to center the text under the product image for desktop viewing? I probably just need clean code for stacking the product images x 2. 

On 8/25/2021 at 7:11 AM, mljp said:

Yes, www.oopsiedaizee.com.  I ended up just getting rid of the main page for ease of navigation - but could you tell me how to center the text under the product image for desktop viewing? I probably just need clean code for stacking the product images x 2. 

Add to Design > Custom CSS

figure.grid-image {
    margin: 0 auto !important;
}

On 8/26/2021 at 11:42 PM, tuanphan said:

Add to Design > Custom CSS

figure.grid-image {
    margin: 0 auto !important;
}

 

Thank you! YOU ARE A WIZARD!

Hi @tuanphan I am having the same problem, I can't dispay two products on phone version.

the site is www.afterlifemode.com 

let me know if you know how to do it please. 

Much appreciated 

On 9/24/2021 at 11:41 PM, SUN1992 said:

Hi @tuanphan I am having the same problem, I can't dispay two products on phone version.

the site is www.afterlifemode.com 

let me know if you know how to do it please. 

Much appreciated 

You mean products on homepage? Add to Design > Custom CSS

/* Mobile-Homepage-Products */
@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1627387512089_7380~.row .span-3, div#block-yui_3_17_2_1_1627387512089_7380~.row .span-4 {
    width: 50% !important;
    float: left !important;
}
div#block-yui_3_17_2_1_1627387512089_7380~.row .span-3:nth-child(2n+1) {
    clear: left;
}
}

Hi @tuanphan thank you so much for homepage it worked!! but I meant in the different categories, when you go to Shop > Dresses / Outerwear / Knitwear / Tops and Shirts / (and all the different categories) 

22 hours ago, SUN1992 said:

Hi @tuanphan thank you so much for homepage it worked!! but I meant in the different categories, when you go to Shop > Dresses / Outerwear / Knitwear / Tops and Shirts / (and all the different categories) 

 

Hi,

I see no products in Outerwear / Knitwear. Can you check it again?

With Tops & Shirts, use this CSS

@media screen and (max-width:640px) {
div#productList {
    display: grid;
    grid-template-columns: repeat(2,1fr) !important;
    grid-column-gap: 10px;
}
}

Hi @tuanphan

 I am having the same problem, I can't dispay two products on phone version.

the site is www.walkintheparknz.com

let me know if you know how to do it please. 

Much appreciated 

On 12/6/2022 at 6:34 AM, littleprojectsnz said:

Hi @tuanphan

 I am having the same problem, I can't dispay two products on phone version.

the site is www.walkintheparknz.com

let me know if you know how to do it please. 

Much appreciated 

Where is page? I can't find shop or product page on your site

On 12/10/2022 at 10:15 PM, tuanphan said:

Where is page? I can't find shop or product page on your site

 

www.walkintheparknz.com/mills-2023

On 3/15/2023 at 3:19 PM, littleprojectsnz said:

www.walkintheparknz.com/mills-2023

Add to Design > Custom CSS

/* Mobile Products 2 columns */
@media screen and (max-width:700px) {
div#productList {
    display: grid !important;
    grid-template-columns: repeat(2,1fr);
    grid-gap: 10px 10px;
}
}

I am having same issues as others. I would like two tiles to be displayed on mobile site, not one. I used your code before and it worked but has since stopped working. Can you assist please? 

https://www.findingalicedesigns.com/

thank you very much. 

On 1/1/2021 at 5:30 PM, tuanphan said:

Add to Home > Design > Custom CSS

/* products 2 columns */
@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1609512364464_27908 .summary-item-list {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    grid-column-gap: 10px;
    grid-row-gap: 10px;
}
}

Can you share site url? We can help easier @Arif_79

 

I need some help with this for a clients site. The website is http://www.prosperity-us.online I put the CSS in but it is not working

On 12/19/2023 at 5:29 AM, harveylm said:

I need some help with this for a clients site. The website is http://www.prosperity-us.online I put the CSS in but it is not working

What is access password?