tuanphan Posted March 15, 2022 Share Posted March 15, 2022 20 hours ago, Tru-Lab said: Hi, I have tried all the code but I am not able to create 2 columns in my mobile website: https://www.tru-lab.com/ . We would like that it works in all the home page (shop collections section but also all the products sections (Verrine and Spreads) and icons section). Can you help us? Thank you very much. Add to Design > Custom CSS /* Mobile 2 columns */ @media screen and (max-width:640px) { /* Shop Collection */ div#page-622b60c51723d94c7a52c99c .span-3 { width: 50% !important; float: left !important; } div#page-622b60c51723d94c7a52c99c .span-3:nth-child(2n+1) { clear: left; } section#verrine .span-3 { width: 50% !important; float: left !important; } section#verrine .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
Tru-Lab Posted March 18, 2022 Share Posted March 18, 2022 On 3/15/2022 at 7:52 AM, tuanphan said: Add to Design > Custom CSS /* Mobile 2 columns */ @media screen and (max-width:640px) { /* Shop Collection */ div#page-622b60c51723d94c7a52c99c .span-3 { width: 50% !important; float: left !important; } div#page-622b60c51723d94c7a52c99c .span-3:nth-child(2n+1) { clear: left; } section#verrine .span-3 { width: 50% !important; float: left !important; } section#verrine .span-3:nth-child(2n+1) { clear: left; }} Thank you very much! Would be possible to have it also in the section: THE MANY, MANY SPREAD POSSIBILITIES Thank you again! Link to comment
tuanphan Posted March 21, 2022 Share Posted March 21, 2022 On 3/18/2022 at 10:05 PM, Tru-Lab said: Thank you very much! Would be possible to have it also in the section: THE MANY, MANY SPREAD POSSIBILITIES Thank you again! Hi. Which page are you referring to? I don't see that section on homepage 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
Tru-Lab Posted March 21, 2022 Share Posted March 21, 2022 2 hours ago, tuanphan said: Hi. Which page are you referring to? I don't see that section on homepage Hi @tuanphan, you can find attached the section in the homepage. As you can see it is the only section that is not in 2 columns and I'd like to have it in 2 columns as the rest of the homepage. Thank you very much Link to comment
tuanphan Posted March 22, 2022 Share Posted March 22, 2022 15 hours ago, Tru-Lab said: Hi @tuanphan, you can find attached the section in the homepage. As you can see it is the only section that is not in 2 columns and I'd like to have it in 2 columns as the rest of the homepage. Thank you very much Add to Design > Custom CSS /* Mobile Home 2 columns */ @media screen and (max-width:767px) { div#block-yui_3_17_2_1_1647015266317_8659+.row .span-4 { width: 50% !important; float: left !important; } div#block-yui_3_17_2_1_1647015266317_8659+.row .span-4:nth-child(2n+1) { clear: left !important; } div#block-yui_3_17_2_1_1647015266317_8659 + .row h1 { 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
Tru-Lab Posted March 25, 2022 Share Posted March 25, 2022 On 3/22/2022 at 4:39 AM, tuanphan said: Add to Design > Custom CSS /* Mobile Home 2 columns */ @media screen and (max-width:767px) { div#block-yui_3_17_2_1_1647015266317_8659+.row .span-4 { width: 50% !important; float: left !important; } div#block-yui_3_17_2_1_1647015266317_8659+.row .span-4:nth-child(2n+1) { clear: left !important; } div#block-yui_3_17_2_1_1647015266317_8659 + .row h1 { font-size: 22px; } } Hi, we have a problem with the 2 columns, can you help us? Thank you Link to comment
tuanphan Posted March 26, 2022 Share Posted March 26, 2022 21 hours ago, Tru-Lab said: Hi, we have a problem with the 2 columns, can you help us? Thank you Which page are you referring to? 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
Tru-Lab Posted March 28, 2022 Share Posted March 28, 2022 On 3/26/2022 at 9:20 AM, tuanphan said: Which page are you referring to? Hi, we are always in the homepage (www.tru-lab.com) around the middle of the page. As you can see here the 2 mobile columns code doesn't work with the section 'dipping' and 'baked'. Can you help me? thank you Link to comment
tuanphan Posted March 30, 2022 Share Posted March 30, 2022 On 3/28/2022 at 8:23 PM, Tru-Lab said: Hi, we are always in the homepage (www.tru-lab.com) around the middle of the page. As you can see here the 2 mobile columns code doesn't work with the section 'dipping' and 'baked'. Can you help me? thank you Don't remove any code in your current code. Add this to Design > Custom CSS /* Dipping Baked mobile */ @media screen and (max-width:767px) { div#block-yui_3_17_2_1_1647015266317_8659+.row .span-4:nth-child(3) { width: 100% !important; display: grid; grid-template-columns: repeat(2,1fr); } div#block-yui_3_17_2_1_1647015266317_8659+.row .span-4:nth-child(3) {display: grid;} div#block-yui_3_17_2_1_1647016147443_24671 { grid-row: 2; } } 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
Tru-Lab Posted April 1, 2022 Share Posted April 1, 2022 On 3/30/2022 at 4:03 AM, tuanphan said: Don't remove any code in your current code. Add this to Design > Custom CSS /* Dipping Baked mobile */ @media screen and (max-width:767px) { div#block-yui_3_17_2_1_1647015266317_8659+.row .span-4:nth-child(3) { width: 100% !important; display: grid; grid-template-columns: repeat(2,1fr); } div#block-yui_3_17_2_1_1647015266317_8659+.row .span-4:nth-child(3) {display: grid;} div#block-yui_3_17_2_1_1647016147443_24671 { grid-row: 2; } } Thank you! Now everything works! Link to comment
ClaireTeixeira Posted September 3, 2022 Share Posted September 3, 2022 Hi there, I also have tried several codes but could not manage to get the pages from my site show two images per row on mobile. Like for instance on this page: https://www.rosaeparis.com/shop/tops Basically, I would like the page to look the same on mobile as on laptop, in miniature. Thanks very much in advance for your help, Link to comment
tuanphan Posted September 4, 2022 Share Posted September 4, 2022 On 9/3/2022 at 9:48 AM, ClaireTeixeira said: Hi there, I also have tried several codes but could not manage to get the pages from my site show two images per row on mobile. Like for instance on this page: https://www.rosaeparis.com/shop/tops Basically, I would like the page to look the same on mobile as on laptop, in miniature. Thanks very much in advance for your help, Try adding to Design > Custom CSS @media screen and (max-width:767px) { div#block-yui_3_17_2_1_1662023719210_755954~.row .span-6 { 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment