MiridiosII Posted December 20, 2020 Share Posted December 20, 2020 @media only screen and (max-width: 767px) { .products.collection-content-wrapper .list-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); grid-column-gap: 2vw; grid-row-gap: 4vw; padding: 0; } } On mobile view, the product grid will now show 2 columns instead of 1. You can change this to show more on mobile by changing "repeat(4,minmax(0,1fr))". If you turn your phone sideways and want 4 columns, you can adjust the max width for when the phone is sideways and create another css for when the phone is vertical. tuanphan 1 Link to comment
SMXTH Posted December 23, 2020 Share Posted December 23, 2020 Im still having issues displaying the product grid to show more than 2 columns instead of 1 using the code above. Any suggestions? Link to comment
SMXTH Posted December 23, 2020 Share Posted December 23, 2020 On 12/19/2020 at 8:03 PM, MiridiosII said: @media only screen and (max-width: 767px) { .products.collection-content-wrapper .list-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); grid-column-gap: 2vw; grid-row-gap: 4vw; padding: 0; } } On mobile view, the product grid will now show 2 columns instead of 1. You can change this to show more on mobile by changing "repeat(4,minmax(0,1fr))". If you turn your phone sideways and want 4 columns, you can adjust the max width for when the phone is sideways and create another css for when the phone is vertical. Im still having issues displaying the product grid to show more than 2 columns instead of 1 using the code above. Will this work for only certain styles provided by squarespace? Link to comment
tuanphan Posted January 2, 2021 Share Posted January 2, 2021 On 12/24/2020 at 4:20 AM, SMXTH said: Im still having issues displaying the product grid to show more than 2 columns instead of 1 using the code above. Will this work for only certain styles provided by squarespace? Can you share site url? We can help easier 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
sundayclubapparel Posted January 8, 2021 Share Posted January 8, 2021 On 12/23/2020 at 9:20 PM, SMXTH said: Im still having issues displaying the product grid to show more than 2 columns instead of 1 using the code above. Will this work for only certain styles provided by squarespace? Hello! I'd also like to solve this, i'm in the early stages of creating my site and currently on mobile it shows 1 product at a time stacked. When I enter the code nothing changes. My site is: www.sundayclubapparel.com thank you! Link to comment
tuanphan Posted January 10, 2021 Share Posted January 10, 2021 On 1/8/2021 at 10:29 PM, sundayclubapparel said: Hello! I'd also like to solve this, i'm in the early stages of creating my site and currently on mobile it shows 1 product at a time stacked. When I enter the code nothing changes. My site is: www.sundayclubapparel.com thank you! Add to Settings > Advanced > Code Injection > Header <style> /* Product 2 columns mobile */ @media screen and (max-width:767px) { .products.collection-content-wrapper .list-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); grid-column-gap: 10px; } } </style> 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
mayasommer Posted May 16, 2022 Share Posted May 16, 2022 Hi @tuanphan! Thanks so much for all your help in this forum. I have tried using all the snippets I could find in these forums to create a two column layout in mobile and my shop seems to be behaving differently than others. The images appear too small when they're in two columns (see attached photo). When the page first loads they're actually the correct size for a second and then pop back into the small mode. I have tried removing ALL of the other custom CSS on my site and isolating the code you provided but the issue still persists. Could there be a setting in Squarespace 7.1 that is causing it to reformat to smaller or do I need to use a different snippet of code? My temporary URL is https://keyboard-heron-fz8p.squarespace.com/ Site password: testing Thanks so much for your help! Maya Link to comment
tuanphan Posted May 20, 2022 Share Posted May 20, 2022 On 5/16/2022 at 9:39 PM, mayasommer said: Hi @tuanphan! Thanks so much for all your help in this forum. I have tried using all the snippets I could find in these forums to create a two column layout in mobile and my shop seems to be behaving differently than others. The images appear too small when they're in two columns (see attached photo). When the page first loads they're actually the correct size for a second and then pop back into the small mode. I have tried removing ALL of the other custom CSS on my site and isolating the code you provided but the issue still persists. Could there be a setting in Squarespace 7.1 that is causing it to reformat to smaller or do I need to use a different snippet of code? My temporary URL is https://keyboard-heron-fz8p.squarespace.com/ Site password: testing Thanks so much for your help! Maya Try adding this to Design > Custom CSS /* Product 2 columns mobile */ @media screen and (max-width:767px) { .products.collection-content-wrapper .list-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); 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
aoifebee Posted March 7, 2023 Share Posted March 7, 2023 Im having the same problem, could you please guide me? https://www.aoifedeburcajewellery.com/ Link to comment
tuanphan Posted March 11, 2023 Share Posted March 11, 2023 On 3/8/2023 at 3:30 AM, aoifebee said: Im having the same problem, could you please guide me? https://www.aoifedeburcajewellery.com/ This code should work for your site & all templates in 7.1 version /* Product 2 columns mobile */ @media screen and (max-width:767px) { .products.collection-content-wrapper .list-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); 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
imagineifnyc Posted May 7, 2023 Share Posted May 7, 2023 Hi tuanphan Im having the same issue and tried the code above today but on mobile Im getting no results. Can you guide me to any errors in my code on this? Thanks 🙂 https://www.imagineifnyc.com Link to comment
tuanphan Posted May 9, 2023 Share Posted May 9, 2023 On 5/8/2023 at 4:28 AM, imagineifnyc said: Hi tuanphan Im having the same issue and tried the code above today but on mobile Im getting no results. Can you guide me to any errors in my code on this? Thanks 🙂 https://www.imagineifnyc.com You are using new editor on homepage, so you can edit page > Click Mobile icon on top right > Then you can drag items to make 2 columns > then save > this won't affect on desktop 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
imagineifnyc Posted May 23, 2023 Share Posted May 23, 2023 On 5/9/2023 at 4:03 AM, tuanphan said: You are using new editor on homepage, so you can edit page > Click Mobile icon on top right > Then you can drag items to make 2 columns > then save > this won't affect on desktop Thanks tuznphan going to try this now. Link to comment
Batu Posted August 1, 2023 Share Posted August 1, 2023 Hey @tuanphan, I have also tried to add the snipped above but no change and I still see only one product on mobile screen. Can you help me? The website is: https://www.hey-gorgeous.co/ Many thanks! Link to comment
tuanphan Posted August 3, 2023 Share Posted August 3, 2023 On 8/1/2023 at 9:09 PM, Batu said: Hey @tuanphan, I have also tried to add the snipped above but no change and I still see only one product on mobile screen. Can you help me? The website is: https://www.hey-gorgeous.co/ Many thanks! It already 2/row to me 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
Batu Posted August 3, 2023 Share Posted August 3, 2023 (edited) On 8/3/2023 at 5:47 AM, tuanphan said: It already 2/row to me @tuanphan Oh cool, I didn't even notice. 😄 Can you also help with the items on the landing page? Your help is highly appreciated. Edited August 4, 2023 by Batu Link to comment
tuanphan Posted August 4, 2023 Share Posted August 4, 2023 21 hours ago, Batu said: @tuanphan Oh cool, I didn't even notice. 😄 Can you also help with the items on the landing page? Your help is highly appreciated. What problem with landing page? And can you share link to landing page? 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
Batu Posted August 4, 2023 Share Posted August 4, 2023 @tuanphan I would like to have the items on the landing page also shown in 2 columns on mobile viewport. Here the link: https://www.hey-gorgeous.co/ Many thanks Batu Link to comment
tuanphan Posted August 6, 2023 Share Posted August 6, 2023 On 8/4/2023 at 10:57 PM, Batu said: @tuanphan I would like to have the items on the landing page also shown in 2 columns on mobile viewport. Here the link: https://www.hey-gorgeous.co/ Many thanks Batu You mean this? You are using new editor, so you can edit page > Click Mobile icon >> Adjust mobile layout Detail: https://support.squarespace.com/hc/en-us/articles/6421525446541-Editing-your-site-with-Fluid-Engine In case you still can't do this, let me know, we can give CSS code 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
Batu Posted August 7, 2023 Share Posted August 7, 2023 Hi @tuanphan I tried already in the mobile viewport but it is somehow messing up my desktop view. Would be great if you can provide a CSS code for this. Thanks Batu Link to comment
tuanphan Posted August 8, 2023 Share Posted August 8, 2023 On 8/7/2023 at 2:29 PM, Batu said: Hi @tuanphan I tried already in the mobile viewport but it is somehow messing up my desktop view. Would be great if you can provide a CSS code for this. Thanks Batu Use this code to Design > Custom CSS or Website > Website Tools > Custom CSS /* Fluid Engine Stacked */ @media screen and (max-width:767px) { .fe-62f27edd36f56172b4650d13>div { grid-area: unset !important; display: block !important; width: 100% !important; margin-bottom: 20px; } .fe-62f27edd36f56172b4650d13 { display: block !important; padding-left: 6vw; padding-right: 6vw; } .fe-62f27edd36f56172b4650d13 .sqs-block-image .design-layout-fluid * { position: relative !important; } .fe-62f27edd36f56172b4650d13>div:not(:first-child) { width: 50% !important; float: left !important; } .fe-62f27edd36f56172b4650d13>div:nth-child(2n+4) { clear: left !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
Batu Posted August 11, 2023 Share Posted August 11, 2023 Cool - thx a lot for your help @tuanphan tuanphan 1 Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment