tellemoi Posted November 21, 2020 Share Posted November 21, 2020 (edited) Site URL: https://tellemoi.co.uk/new-index Hi there, I am going crazy trying to get the 3 product blocks to sit side by side in mobile view, I've attempted a few codes and tried to identify the blocks and input, however still not able to get it to stay in place. I found adjusting the CSS to .product-blocks did help. However this did not last and reverted back. I could really do with some assistance. Thank you in advance! Edited November 21, 2020 by tellemoi Link to comment
tuanphan Posted November 22, 2020 Share Posted November 22, 2020 Add to Home > Design > Custom CSS /* 3 columns mobile */ @media screen and (max-width:767px) { div#page-5fb8554758f7584e710bd7be .span-12 .span-2 { width: 33.33% !important; float: 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
tellemoi Posted November 23, 2020 Author Share Posted November 23, 2020 Thank you so much for the response @tuanphan unfortunately the code hasn't made a difference, using Brine 7.0 I have other coding, and wonder if this is affecting it #logo .logo.image img { width: 600px; max-width: 1000px;} .ProductList-filter-list-item:first-child { display: none !important; } .variant-option * { font-family: "Proxima Nova", proxima-nova !important; } .form-wrapper .field-list .date .field { position: relative } .month { left: 5em; margin-left: 0 !important } .day { left: -3em; margin-left: 0 !important } .year { left: 2.5em; margin-left: 0 !important } .markdown-block p { margin-left: 1em; } .markdown-block .ui-closed:before { font-family: monospace; content: "+ "; color: #000000; } .markdown-block .ui-open:before { font-family: monospace; content: "- "; color: #000000; } .markdown-block { order: 5; } #new-page-1 { background: #f7f7f7 } //remove hyphens// p, h1, h2, h3 { -webkit-hyphens: manual !important; -moz-hyphens: manual !important; -ms-hyphens: manual !important; hyphens: manual !important; } .products .grid-item .sqs-add-to-cart-button { text-align: center; padding: 10px 20px; } /* 3 columns mobile */ @media screen and (max-width:640px) { div#page-5fb8554758f7584e710bd7be .span-12 .span-2 { width: 33.3 !important; float: left !important; } } .product-block .sqs-add-to-cart-button { padding: 0em 1em!important; } Link to comment
Solution tuanphan Posted November 23, 2020 Solution Share Posted November 23, 2020 Did you edit anything after posting this question? Just checked again. I think you changed something. Use new code /* 3 columns mobile */ @media screen and (max-width:640px) { div#page-5fb8554758f7584e710bd7be>.row:first-child .span-4 { width: 33.33% !important; float: 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
tellemoi Posted November 23, 2020 Author Share Posted November 23, 2020 Sorry, yes I changed the break point to 640px @tuanphan Link to comment
tellemoi Posted November 23, 2020 Author Share Posted November 23, 2020 Amazing @tuanphan Amazing it works!! Thank you so so much! really appreciate it Link to comment
MattIconic Posted January 21, 2021 Share Posted January 21, 2021 @tuanphan Is this any way to get this working for 2 columns? I've got a stack of 9 code blocks in a 3x3 grid, but for mobile this grid is to small. If I change the width to 50%, it's almost perfect in 2 columns, but then there are 3 at the end that are stacked on one side. Like this 1 2 3 4 5 6 7 8 9 and I want it to look like: 1 2 3 4 5 6 7 8 9 website: https://flamingo-fish-258z.squarespace.com/ pass: iconic Is there any way to get this working with 2 columns? Thank you in advance! Link to comment
tuanphan Posted January 23, 2021 Share Posted January 23, 2021 On 1/21/2021 at 3:44 PM, MattIconic said: @tuanphan Is this any way to get this working for 2 columns? I've got a stack of 9 code blocks in a 3x3 grid, but for mobile this grid is to small. If I change the width to 50%, it's almost perfect in 2 columns, but then there are 3 at the end that are stacked on one side. Like this 1 2 3 4 5 6 7 8 9 and I want it to look like: 1 2 3 4 5 6 7 8 9 website: https://flamingo-fish-258z.squarespace.com/ pass: iconic Is there any way to get this working with 2 columns? Thank you in advance! Hi. Which columns? 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
MattIconic Posted January 26, 2021 Share Posted January 26, 2021 On 1/23/2021 at 3:49 PM, tuanphan said: Hi. Which columns? Hi! On the home page, where the team photos are. I think this is the correct page section: page-section-5fb3c8668ae3d9089a285b49 Thanks again! Link to comment
tuanphan Posted February 2, 2021 Share Posted February 2, 2021 On 1/26/2021 at 4:02 AM, MattIconic said: Hi! On the home page, where the team photos are. I think this is the correct page section: page-section-5fb3c8668ae3d9089a285b49 Thanks again! Add to Design > Custom CSS @media screen and (max-width:767px) { body.homepage .gallery-grid-wrapper { grid-template-columns: repeat(3,1fr) !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
Lace Posted February 3, 2021 Share Posted February 3, 2021 On 11/23/2020 at 2:20 PM, tuanphan said: /* 3 columns mobile */ @media screen and (max-width:640px) { div#page-5fb8554758f7584e710bd7be>.row:first-child .span-4 { width: 33.33% !important; float: left !important; } } Hey Tuanphan, My site got the same issue and I've try to use this code however it doesn't work on my page. I want my product page to be in 2 columns on mobile view, can you help me with this? The page I want to change is: https://morpheus.squarespace.com/shop Thank you! Link to comment
tuanphan Posted February 4, 2021 Share Posted February 4, 2021 On 2/3/2021 at 6:11 PM, Lace said: Hey Tuanphan, My site got the same issue and I've try to use this code however it doesn't work on my page. I want my product page to be in 2 columns on mobile view, can you help me with this? The page I want to change is: https://morpheus.squarespace.com/shop Thank you! Add 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
Lace Posted February 4, 2021 Share Posted February 4, 2021 4 minutes ago, tuanphan said: Add 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; } } Thank you Tuanphan, it works magically! Although I still got a problem, which is a white line appears on top of the first row products. Have no idea how to get rid of it, it only appears on mobile view 😞 Can you help? Thank you! page: https://morpheus.squarespace.com/shop Link to comment
tuanphan Posted February 5, 2021 Share Posted February 5, 2021 19 hours ago, Lace said: Thank you Tuanphan, it works magically! Although I still got a problem, which is a white line appears on top of the first row products. Have no idea how to get rid of it, it only appears on mobile view 😞 Can you help? Thank you! page: https://morpheus.squarespace.com/shop It looks like you solved this? Lace 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
Lace Posted February 8, 2021 Share Posted February 8, 2021 On 2/5/2021 at 9:33 AM, tuanphan said: It looks like you solved this? Yes I have sorted this thank you! However still on my landing page, I have a Best sellers section and in mobile view they stacked, is there any code I can use to let my landing page's product view on mobile to be in 2 column? Thank you: https://morpheus.squarespace.com/ Link to comment
tuanphan Posted February 9, 2021 Share Posted February 9, 2021 20 hours ago, Lace said: Yes I have sorted this thank you! However still on my landing page, I have a Best sellers section and in mobile view they stacked, is there any code I can use to let my landing page's product view on mobile to be in 2 column? Thank you: https://morpheus.squarespace.com/ Add to Design > Custom CSS /* Best sellers mobile */ @media screen and (max-width:767px) { div#page-section-5fdc9ce76ba1be148e86d3d8 .span-4 { width: 50% !important; float: 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
Artjective Posted February 9, 2021 Share Posted February 9, 2021 (edited) 8 hours ago, tuanphan said: * Best sellers mobile */ @media screen and (max-width:767px) { div#page-section-5fdc9ce76ba1be148e86d3d8 .span-4 { width: 50% !important; float: left !important; } } Hi tuanphan! I was able to apply the code to my 3 icons at https://www.pedrofarms.com but can you help me fix the font size? Kindly check the screenshot. Thank you so much in advance!!! Edited February 9, 2021 by Artjective Solved it the first time. Link to comment
Lace Posted February 10, 2021 Share Posted February 10, 2021 23 hours ago, tuanphan said: /* Best sellers mobile */ @media screen and (max-width:767px) { div#page-section-5fdc9ce76ba1be148e86d3d8 .span-4 { width: 50% !important; float: left !important; } } Sorry it didn't seem to work when I add one more product on the best seller section. Can you have a look for me? Thanks My website:https://morpheus.squarespace.com/ Link to comment
tuanphan Posted February 14, 2021 Share Posted February 14, 2021 On 2/10/2021 at 3:27 AM, Artjective said: Hi tuanphan! I was able to apply the code to my 3 icons at https://www.pedrofarms.com but can you help me fix the font size? Kindly check the screenshot. Thank you so much in advance!!! Add to Design > Custom CSS /* order font size mobile */ @media screen and (max-width:767px) { div#block-yui_3_17_2_1_1612529510512_12593+.row h3 { font-size: 22px; } } 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
tuanphan Posted February 14, 2021 Share Posted February 14, 2021 On 2/10/2021 at 7:30 PM, Lace said: Sorry it didn't seem to work when I add one more product on the best seller section. Can you have a look for me? Thanks My website:https://morpheus.squarespace.com/ Add to Design > Custom CSS /* Best sellers 3 columns mobile */ @media screen and (max-width:767px) { div#page-section-5fdc9ce76ba1be148e86d3d8 .span-9 .span-3 { width: 33.33% !important; float: 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
Lace Posted February 14, 2021 Share Posted February 14, 2021 Hi tuanphan, Sadly the code you gave me didn't work out as I expected. I wanted the Best Seller Section to have 2 Products Side by side, 2 Columns and 2 Rows as there are 4 products there in total. Can you help me to have a look and give me another custom CSS code? Thanks a lot, My website:https://morpheus.squarespace.com/ Link to comment
EmilyT1 Posted February 16, 2021 Share Posted February 16, 2021 I tried the codes listed above but it did not work for my 7.1 site. I have a shop by category and best sellers section and I'd like them to be side by side on mobile (horizontal and not vertical). There are 4 rows for both. Can someone help me with a CSS code? My website: https://emthaw.com Link to comment
tuanphan Posted February 18, 2021 Share Posted February 18, 2021 On 2/15/2021 at 3:55 AM, Lace said: Hi tuanphan, Sadly the code you gave me didn't work out as I expected. I wanted the Best Seller Section to have 2 Products Side by side, 2 Columns and 2 Rows as there are 4 products there in total. Can you help me to have a look and give me another custom CSS code? Thanks a lot, My website:https://morpheus.squarespace.com/ Your layout, can't change to 2 items/row on mobile. Need to edit some things on your layout, then able to use code. If you can add me as a contributor, I can take a look 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
tuanphan Posted February 18, 2021 Share Posted February 18, 2021 On 2/16/2021 at 7:18 AM, EmilyT1 said: I tried the codes listed above but it did not work for my 7.1 site. I have a shop by category and best sellers section and I'd like them to be side by side on mobile (horizontal and not vertical). There are 4 rows for both. Can someone help me with a CSS code? My website: https://emthaw.com Add to Design > Custom CSS /* Mobile 2 columns */ @media screen and (max-width:767px) { div#block-yui_3_17_2_1_1604951950007_46430+.row>.span-3 { width: 50% !important; float: left !important; } div#block-yui_3_17_2_1_1604951950007_46430+.row>.span-3:nth-child(2n+1) { clear: left !important; } div#block-yui_3_17_2_1_1604951950007_46430+.row>.span-3 * {font-size: 20px !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
Lace Posted February 18, 2021 Share Posted February 18, 2021 1 hour ago, tuanphan said: Your layout, can't change to 2 items/row on mobile. Need to edit some things on your layout, then able to use code. If you can add me as a contributor, I can take a look Hi, thanks a lot, I'll drop you a private message regarding this. 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