Jump to content

2 Products per row on Mobile view

Go to solution Solved by paul2009,

Recommended Posts

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 

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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?

Edited by Lelelndn
Link to comment
  • 7 months later...
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?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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. 

Link to comment
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 4 weeks later...
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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 1 year later...
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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 3 months later...
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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 6 months later...
  • Solution
On 10/14/2023 at 9:52 PM, FindingAlice said:

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.

You no longer need code to achieve this because Squarespace have just added this as a feature to Squarespace 7.1. If you've used code to add two columns, it will be safer to remove this and use the built-in feature instead.

To access this feature, go to your Store page and click Edit

Put the preview into Mobile View (using the buttons in the top-right corner) and then click Edit Section. You’ll be able to update your mobile column layout to two columns instead of one.

Having two columns on mobile (instead of one) typically increases sales by 18%.

image.thumb.png.3f90cf6a811744965f2b8382d1526a5d.png

Note that this setting only affects the style of the mobile page. You can independently adjust the number of columns in the desktop layout by putting the preview into Desktop View

Did this help? Please give feedback by clicking an icon below  ⬇️

 

Edited by paul2009

About me: I'm Paul, a SQSP user for over 18 yrs and a Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL, providing high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji below. Buying a coffee is optional.

Book paid help with domains: Connect a GoDaddy domain. Connect a Squarespace Domain. Domain assistance

Link to comment
  • 2 weeks later...
  • 1 month later...
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

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.