AnjArt Posted August 7, 2020 Share Posted August 7, 2020 Site URL: http://anjart.co.uk Hi, I've got a Nevins template and on the desktop I have 4 rows of products in the shop. On the mobile view its stacking one on top of the other, making it incredibly long for anyone scrolling through. Is it possible to use code to display two products side by side on the mobile view without changing the desktop layout and can anyone tell me how to go about this? Many thanks hasher22 1 Link to comment
tuanphan Posted August 7, 2020 Share Posted August 7, 2020 Add to Home > Design > Custom CSS @media screen and (max-width:767px) { .list-grid { display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr)); grid-row-gap: 5px; grid-column-gap: 10px; } } VectorMin and hasher22 1 1 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
AnjArt Posted August 7, 2020 Author Share Posted August 7, 2020 29 minutes ago, tuanphan said: Add to Home > Design > Custom CSS @media screen and (max-width:767px) { .list-grid { display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr)); grid-row-gap: 5px; grid-column-gap: 10px; } } Thanks so much! Worked a treat :) Link to comment
Guest Posted August 24, 2020 Share Posted August 24, 2020 On 8/7/2020 at 11:42 PM, tuanphan said: Add to Home > Design > Custom CSS @media screen and (max-width:767px) { .list-grid { display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr)); grid-row-gap: 5px; grid-column-gap: 10px; } } @tuanphan Hi there. I'm having a similar issue with displaying products side by side on mobile. Here's my website: www.totaljoy.co Could you please help out with some custom CSS to display two columns on mobile? Thank you x Link to comment
tuanphan Posted August 24, 2020 Share Posted August 24, 2020 4 hours ago, totaljoy said: @tuanphan Hi there. I'm having a similar issue with displaying products side by side on mobile. Here's my website: www.totaljoy.co Could you please help out with some custom CSS to display two columns on mobile? Thank you x Where products? 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
Guest Posted September 14, 2020 Share Posted September 14, 2020 On 8/24/2020 at 5:44 PM, tuanphan said: Where products? Here: totaljoy.co/shop Link to comment
tuanphan Posted September 14, 2020 Share Posted September 14, 2020 2 hours ago, totaljoy said: Here: totaljoy.co/shop url doesn't exist. Have you enabled it yet? 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
B3stoh Posted February 11, 2021 Share Posted February 11, 2021 (edited) Hi @tuanphan Many thanks for your input. I tried keying that into my Custom CSS but it didn't seem to work unfortunately. It is a page with product blocks as opposed to a product page.https://www.heydoodle.com.au/shopcollection If you have a spare moment could you have a look? Edited February 11, 2021 by B3stoh Link to comment
tuanphan Posted February 14, 2021 Share Posted February 14, 2021 On 2/11/2021 at 9:15 AM, B3stoh said: Hi @tuanphan Many thanks for your input. I tried keying that into my Custom CSS but it didn't seem to work unfortunately. It is a page with product blocks as opposed to a product page.https://www.heydoodle.com.au/shopcollection If you have a spare moment could you have a look? It looks like you solved this? 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
natifco Posted August 4, 2022 Share Posted August 4, 2022 On 8/7/2020 at 9:42 AM, tuanphan said: Add to Home > Design > Custom CSS @media screen and (max-width:767px) { .list-grid { display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr)); grid-row-gap: 5px; grid-column-gap: 10px; } } Hello, I would like to do something similar to my product page on mobile and desktop view. For desktop view I would like to keep 3 products per row. For mobile view I would like to keep only 1 product per row. Is this possible? Thanks in advance! Link to comment
tuanphan Posted August 5, 2022 Share Posted August 5, 2022 16 hours ago, natifco said: Hello, I would like to do something similar to my product page on mobile and desktop view. For desktop view I would like to keep 3 products per row. For mobile view I would like to keep only 1 product per row. Is this possible? Thanks in advance! Hi. What is product page url? With code I sent, if you want 1 item/row, just change number 2 to 1 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
Yenna Posted March 21 Share Posted March 21 Hi, I would like to make the photo in the product page smaller (I use the "medium" layout for the page) and the name of the produst together with the quantity and "add to cart" centred, could you please help me? This is the page: https://www.patasyladridos.com/shop/p/beetroot-cookies. Many thanks🙏🏼 Link to comment
tuanphan Posted March 25 Share Posted March 25 On 3/21/2024 at 9:11 PM, Yenna said: Hi, I would like to make the photo in the product page smaller (I use the "medium" layout for the page) and the name of the produst together with the quantity and "add to cart" centred, could you please help me? This is the page: https://www.patasyladridos.com/shop/p/beetroot-cookies. Many thanks🙏🏼 To make image smaller on mobile, you can use this to Website > Website Tools > Custom CSS @media screen and (max-width:767px) { .pdp-layout .pdp-gallery { max-width: 90%; margin: 0 auto; } .pdp-layout .pdp-details .pdp-details-title { text-align: center; } div.pdp-details-price { text-align: center; } } 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
Yenna Posted April 23 Share Posted April 23 Amazing, you are always so helpful, thanks a lot!!!🤩🙏🏼 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