mikom10 Posted August 1, 2020 Share Posted August 1, 2020 Site URL: http://www.mikomarfori.com Hey! I'm trying to update my squarespace site on mobile view. On desktop view, I have these 3 images that look great together side by side. However, on mobile view, these images stack on top of each other and take up the entire screen. Is there a code that I can use that can help maintain the original layout of these 3 images? Link to comment
tuanphan Posted August 1, 2020 Share Posted August 1, 2020 Add to Home > Design > Custom CSS @media screen and (max-width:767px) { div#page-5d13d7c4990c4f00014c0845 .span-12 { .span-4 { width: 33.33% !important; float: left !important; } .span-4 * { 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
mikom10 Posted August 2, 2020 Author Share Posted August 2, 2020 8 hours ago, tuanphan said: Add to Home > Design > Custom CSS @media screen and (max-width:767px) { div#page-5d13d7c4990c4f00014c0845 .span-12 { .span-4 { width: 33.33% !important; float: left !important; } .span-4 * { font-size: 20px !important; } } } Wow, I've been trying to figure this out for so long. Thank you so much!!! Link to comment
danamichellecastro Posted January 16, 2021 Share Posted January 16, 2021 Trying to do the same thing with mine @tuanphan https://www.threecrownsstudio.com/ Link to comment
tuanphan Posted January 18, 2021 Share Posted January 18, 2021 On 1/17/2021 at 12:46 AM, danamichellecastro said: Trying to do the same thing with mine @tuanphan https://www.threecrownsstudio.com/ Add to Design > Custom CSS /* services side by side */ @media screen and (max-width:767px) { div#page-section-5fc481be9b1ed035386d54af>.row>.span-4 { width: 33.33% !important; float: left !important; } div#page-section-5fc481be9b1ed035386d54af>.row>.span-4 * { font-size: 12px; } } Lalat 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
LJM Posted January 18, 2021 Share Posted January 18, 2021 I am too @tuanphan https://www.liammarketing.co.uk/ Link to comment
tuanphan Posted January 20, 2021 Share Posted January 20, 2021 On 1/19/2021 at 12:11 AM, LJM said: I am too @tuanphan https://www.liammarketing.co.uk/ Add to Design > Custom CSS /* Home 3 images mobile */ @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
consultant9987 Posted January 23, 2021 Share Posted January 23, 2021 Hi @tuanphan I have treid using a few of the above snippets. I have used blocks with images and text that again on mobile stack. I was hoping to get these into a two column format. Any suggestions welcome. Thank you https://www.roostconsulting.co.uk/marketing Link to comment
betterbelocal Posted January 23, 2021 Share Posted January 23, 2021 (edited) @tuanphan Hi, would really appreciate it if you can help me solve this problem. On https://betterbelocal.com/regina-restaurants I have the Logo with Name below I currently have 4 logos across on desktop view. I would like to have 2 across on mobile view but currently its just stacking it which makes for loads of scrolling 1 business at a time. Anyway you can fix this please? Thank you very much Edited January 24, 2021 by betterbelocal link Link to comment
tuanphan Posted January 24, 2021 Share Posted January 24, 2021 18 hours ago, consultant9987 said: Hi @tuanphan I have treid using a few of the above snippets. I have used blocks with images and text that again on mobile stack. I was hoping to get these into a two column format. Any suggestions welcome. Thank you https://www.roostconsulting.co.uk/marketing Add to Design > Custom CSS /* Mobile 2 columns */ @media screen and (max-width:767px) { div#block-8eb59604da7af8a7a546+.row>.span-2 { width: 50% !important; float: left !important; } div#block-8eb59604da7af8a7a546+.row>.span-4 .span-2 { width: 50% !important; float: left !important; } div#block-8eb59604da7af8a7a546+.row>.span-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
tuanphan Posted January 24, 2021 Share Posted January 24, 2021 5 hours ago, betterbelocal said: @tuanphan Hi, would really appreciate it if you can help me solve this problem. On https://betterbelocal.com/businesses-go-here I have the Logo with Name below I currently have 4 logos across on desktop view. I would like to have 2 across on mobile view but currently its just stacking it which makes for loads of scrolling 1 business at a time. Anyway you can fix this please? Thank you very much The url doesn't exist. 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
betterbelocal Posted January 24, 2021 Share Posted January 24, 2021 @tuanphan Hi, sorry I just fixed it. Link to comment
tuanphan Posted January 24, 2021 Share Posted January 24, 2021 2 minutes ago, betterbelocal said: @tuanphan Hi, sorry I just fixed it. Add to Design > Custom CSS /* Mobile 2 columns */ @media screen and (max-width:767px) { div#page-section-600a5cd71c7fb14b24242b3b .span-3 { display: -webkit-box; display: -ms-flexbox; display: flex; } } 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
betterbelocal Posted January 24, 2021 Share Posted January 24, 2021 (edited) @tuanphan Thank you! But how can I do this across on all pages? I just entered the code you gave me and the first couple are side by side but then it goes to one again. Do you know how I can fix this? Thanks again! https://betterbelocal.com/regina-restaurants https://betterbelocal.com/regina-household-decor I have around 150 pages like this, can you tell me what exactly I have to insert for each page? And how to replicate it across all of them. * In each link I have multiple sections, so I am assuming I have to put in some different code for each section? Or is there one single code injection I can put into Custom CSS that will convert all the pages to 2 columns on mobile? Edited January 24, 2021 by betterbelocal Link to comment
teesaurus Posted February 3, 2021 Share Posted February 3, 2021 @tuanphan would you be able to help me? I tried using some of the code from above but it's not working on my page. I would love to have my mobile gallery grid display 3 columns of pictures instead of 2. On desktop it displays 3 like how I would like..but it adjusts for mobile automatically. Thank you! https://www.jasonherkert.com/gallery Pass: jason2021 Link to comment
tuanphan Posted February 4, 2021 Share Posted February 4, 2021 On 2/3/2021 at 3:37 PM, teesaurus said: @tuanphan would you be able to help me? I tried using some of the code from above but it's not working on my page. I would love to have my mobile gallery grid display 3 columns of pictures instead of 2. On desktop it displays 3 like how I would like..but it adjusts for mobile automatically. Thank you! https://www.jasonherkert.com/gallery Pass: jason2021 Add to Design > Custom CSS /* Mobile gallery */ @media screen and (max-width:767px) { .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
TaylorAlders Posted March 3, 2021 Share Posted March 3, 2021 (edited) @tuanphan These photos on desktop view are side by side, but stack in desktop view. How can I set them side by side on mobile view like desktop view? (See images) Edited March 3, 2021 by TaylorAlders Link to comment
TaylorAlders Posted March 10, 2021 Share Posted March 10, 2021 @tuanphan The photos stack in MOBILE version - initial post was a typo. Is there a way to make them stay side by side in mobile version? (like the desktop version) Link to comment
rebeccastumpf Posted March 11, 2021 Share Posted March 11, 2021 (edited) @tuanphan wow, so glad I stumbled across this! I've been trying to figure out how to do this with mine as well! Tried using some of the code above, but wasn't able to get it to work. I already have some other custom code in there so I wasn't sure if I just start on a new line after a closing "}"? Basically would love my site to display a few images side-by-side (or whatever fits to make the grid) kinda like on a desktop. But the mobile version of squarespace just automatically stacks them. https://www.rebeccastumpf.com/ THANKS! Kindly, Rebecca Edited March 11, 2021 by rebeccastumpf clarification Link to comment
HannahLuiz Posted March 19, 2021 Share Posted March 19, 2021 @tuanphan I am having this issue as well with these three icons. Is there a better layout option that I am missing? I would greatly appreciate any assistance with getting these icons to stay side by side! www.mellocontracting.com Thank you! Hannah Link to comment
tuanphan Posted March 22, 2021 Share Posted March 22, 2021 On 3/11/2021 at 5:13 AM, TaylorAlders said: @tuanphan The photos stack in MOBILE version - initial post was a typo. Is there a way to make them stay side by side in mobile version? (like the desktop version) Hi. Can you share link to page where you have problem? We can help easier On 3/19/2021 at 7:50 PM, HannahLuiz said: @tuanphan I am having this issue as well with these three icons. Is there a better layout option that I am missing? I would greatly appreciate any assistance with getting these icons to stay side by side! www.mellocontracting.com Thank you! Hannah Add to Design > Custom CSS /* mobile icons side by side */ @media screen and (max-width:767px) { div#block-283160ed342d16308b2e+.row .span-2 { width: 33.33% !important; float: left !important; } div#block-283160ed342d16308b2e+.row .span-2 * { font-size: 14px; } } LeauxFi 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
TPLvision-2021 Posted March 22, 2021 Share Posted March 22, 2021 On 1/18/2021 at 7:13 AM, tuanphan said: Hi! I'm looking to do the same for my homepage: www.machinevisionbar.com I would like the 4 logos below to appear into 2 column on mobile view: As well as those ones: Would you be able to help ? thank you very much, Marianne Link to comment
tuanphan Posted March 24, 2021 Share Posted March 24, 2021 On 3/22/2021 at 6:36 PM, TPLvision-2021 said: Hi! I'm looking to do the same for my homepage: www.machinevisionbar.com I would like the 4 logos below to appear into 2 column on mobile view: As well as those ones: Would you be able to help ? thank you very much, Marianne Add to Design > Custom CSS /* 2 images row mobile */ @media screen and (max-width:767px) { div#block-08591b012e466568aa45+.row .span-3 { width: 50% !important; float: left !important; } div#block-08591b012e466568aa45+.row .span-3:nth-child(2n+1) { clear: left; } } TPLvision-2021 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
TPLvision-2021 Posted March 25, 2021 Share Posted March 25, 2021 On 3/24/2021 at 1:03 PM, tuanphan said: Add to Design > Custom CSS /* 2 images row mobile */ @media screen and (max-width:767px) { div#block-08591b012e466568aa45+.row .span-3 { width: 50% !important; float: left !important; } div#block-08591b012e466568aa45+.row .span-3:nth-child(2n+1) { clear: left; } } you are the best ! thank you so much for your help Link to comment
tuanphan Posted March 29, 2021 Share Posted March 29, 2021 On 3/25/2021 at 10:00 PM, TPLvision-2021 said: you are the best ! thank you so much for your help Hi. Tablet looks small. Do you want to change to 2 items/row? 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