shannamc Posted March 26, 2021 Share Posted March 26, 2021 @tuanphanHi! Would you please be able to help me get these square images to be in 2 columns on mobile? URL: https://hexaflexagon-terrier-4kwy.squarespace.com/sign-up PW: quickfit2021 Thank you so much! Link to comment
tuanphan Posted March 29, 2021 Share Posted March 29, 2021 On 2/15/2021 at 3:33 PM, katie_w_3 said: Hi @tuanphan, apologies, the url is https://www.unarodden.com/the-gift-edit I have the columns working now but is there anyway to have the images read left to right from my desktop site, as opposed to vertically? It really scrambles the order. Thanks so much! Missing your comment :( Do you still need help? On 3/26/2021 at 2:56 PM, shannamc said: @tuanphanHi! Would you please be able to help me get these square images to be in 2 columns on mobile? URL: https://hexaflexagon-terrier-4kwy.squarespace.com/sign-up PW: quickfit2021 Thank you so much! Add to Design > Custom CSS /* sign up images side by side */ @media screen and (max-width:767px) { div#page-section-605d894750862c5f0f7f7167, div#page-section-605d894750862c5f0f7f7167 { .span-12>.row:first-child>.span-3 { 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
shannamc Posted March 29, 2021 Share Posted March 29, 2021 5 hours ago, tuanphan said: Add to Design > Custom CSS /* sign up images side by side */ @media screen and (max-width:767px) { div#page-section-605d894750862c5f0f7f7167, div#page-section-605d894750862c5f0f7f7167 { .span-12>.row:first-child>.span-3 { width: 50% !important; float: left !important; } } } Hi @tuanphan Thank you so much for taking the time to reply! This has worked for the left hand 2 column section of the desktop images, but not for the right hand 2 columns, they are displaying as one column on mobile. Is there a fix for this? Link to comment
tuanphan Posted March 31, 2021 Share Posted March 31, 2021 On 3/30/2021 at 3:05 AM, shannamc said: Hi @tuanphan Thank you so much for taking the time to reply! This has worked for the left hand 2 column section of the desktop images, but not for the right hand 2 columns, they are displaying as one column on mobile. Is there a fix for this? Add new code /* sign up images side by side */ @media screen and (max-width:767px) { div#page-section-605d894750862c5f0f7f7167, div#page-section-605d894750862c5f0f7f7167 { .span-12>.row:first-child>.span-3 { width: 50% !important; float: left !important; } } div#page-section-605d894750862c5f0f7f7167 .span-12 .span-6 .span-3 { 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
shannamc Posted April 6, 2021 Share Posted April 6, 2021 On 3/31/2021 at 7:50 PM, tuanphan said: Add new code /* sign up images side by side */ @media screen and (max-width:767px) { div#page-section-605d894750862c5f0f7f7167, div#page-section-605d894750862c5f0f7f7167 { .span-12>.row:first-child>.span-3 { width: 50% !important; float: left !important; } } div#page-section-605d894750862c5f0f7f7167 .span-12 .span-6 .span-3 { width: 50% !important; float: left !important; } } That has worked, thank you so much! Link to comment
ThisWayToFabulous Posted April 6, 2021 Share Posted April 6, 2021 (edited) @tuanphan I'm trying to do similar with the icons toward the bottom of my page! The icons (4 across) all just stack. Ideally id love if it stayed 4 across but I could make do with 2 x 2. https://culitrade.squarespace.com/about-culitrade Password is JESSI Edited April 6, 2021 by ThisWayToFabulous Link to comment
tuanphan Posted April 12, 2021 Share Posted April 12, 2021 On 4/6/2021 at 7:27 PM, ThisWayToFabulous said: @tuanphan I'm trying to do similar with the icons toward the bottom of my page! The icons (4 across) all just stack. Ideally id love if it stayed 4 across but I could make do with 2 x 2. https://culitrade.squarespace.com/about-culitrade Password is JESSI Hi. Add to Design > Custom CSS /* Icons side by side */ @media screen and (max-width:767px) { div#page-section-6064e1a45a6eba7d94e16010 .span-12>.row .span-3 { width: 50% !important; float: left !important; } div#page-section-6064e1a45a6eba7d94e16010 .span-12>.row .span-3:nth-child(2n+1) { 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 April 12, 2021 Share Posted April 12, 2021 On 4/6/2021 at 7:27 PM, ThisWayToFabulous said: @tuanphan I'm trying to do similar with the icons toward the bottom of my page! The icons (4 across) all just stack. Ideally id love if it stayed 4 across but I could make do with 2 x 2. https://culitrade.squarespace.com/about-culitrade Password is JESSI Also, I see the site has problems Site URL: https://culitrade.squarespace.com/ 1. (Mobile-Header) Logo disappear 2. (Tablet-About) Icons don’t look good. 3. (Overlay Menu) No items. Want to remove overlay? 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
katie_w_3 Posted April 16, 2021 Share Posted April 16, 2021 On 2/15/2021 at 8:33 AM, katie_w_3 said: Hi @tuanphan, apologies, the url is https://www.unarodden.com/the-gift-edit I have the columns working now but is there anyway to have the images read left to right from my desktop site, as opposed to vertically? It really scrambles the order. Thanks so much! yes please @tuanphan, I would still love some help if possible! Many thanks Link to comment
tuanphan Posted April 16, 2021 Share Posted April 16, 2021 2 hours ago, katie_w_3 said: yes please @tuanphan, I would still love some help if possible! Many thanks Q1. It looks like you solved? However mobile menu has no item. Do you want to remove burger icon? Q2. Add to Design > Custom CSS /* About page - tablet - icons */ @media screen and (max-width:991px) and (min-width:768px) { [data-section-id="6064e1a45a6eba7d94e16010"] .content { width: 90% !important; } } Q3. Add to Design > Custom CSS /* remove burger */ .burger-box { visibility: hidden; } 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
Esoes_design Posted May 20, 2021 Share Posted May 20, 2021 Hi @tuanphan I have a problem with the code you gave for the two colomns on mobile. Here is the version on desktop : And for the mobile version, as it takes the colomns, the last image with the heart is on the bottom alone. I woulk like it at the right of the image of the plate and fork. See in green below : Here is the code I used : //Colone mobile - Image Entreprise// @media screen and (max-width:767px) { div#page-section-607021392d09fc7af89b174d>.row>.col>.row>.col { width: 50% !important; float: left !important; } div#page-section-607021392d09fc7af89b174d .image-block { padding: 5px; } div#page-section-607021392d09fc7af89b174d .image-block * { margin-bottom: 2px; }} Here is the website : https://chimes-poodle-kggl.squarespace.com/carte-entreprise Pass : Advantage-Club Thank you so much for your help @tuanphan ! Link to comment
tuanphan Posted May 21, 2021 Share Posted May 21, 2021 On 5/20/2021 at 8:15 PM, Esoes_design said: Hi @tuanphan I have a problem with the code you gave for the two colomns on mobile. Here is the version on desktop : And for the mobile version, as it takes the colomns, the last image with the heart is on the bottom alone. I woulk like it at the right of the image of the plate and fork. See in green below : Here is the code I used : //Colone mobile - Image Entreprise// @media screen and (max-width:767px) { div#page-section-607021392d09fc7af89b174d>.row>.col>.row>.col { width: 50% !important; float: left !important; } div#page-section-607021392d09fc7af89b174d .image-block { padding: 5px; } div#page-section-607021392d09fc7af89b174d .image-block * { margin-bottom: 2px; }} Here is the website : https://chimes-poodle-kggl.squarespace.com/carte-entreprise Pass : Advantage-Club Thank you so much for your help @tuanphan ! try this new code @media screen and (max-width:767px) { div#page-section-607021392d09fc7af89b174d>.row>.col>.row>.col { width: 50% !important; float: left !important; } div#page-section-607021392d09fc7af89b174d>.row>.col>.row>.col:nth-child(2n+1) { clear: left !important; } div#page-section-607021392d09fc7af89b174d .image-block { padding: 5px; } div#page-section-607021392d09fc7af89b174d .image-block * { margin-bottom: 2px; }} 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
Ingrid89 Posted May 25, 2021 Share Posted May 25, 2021 @tuanphan Thanks for the code for the two columns, however, it only works on my upper row. The rest is still divided. See screenshot. Link to comment
Ingrid89 Posted May 25, 2021 Share Posted May 25, 2021 I am now using the code below, and if I remove +1 ,next to 2n , then I get those upper two next to each other. But I would like to have all of them two by two. Link to comment
Esoes_design Posted May 25, 2021 Share Posted May 25, 2021 On 5/21/2021 at 4:40 PM, tuanphan said: try this new code @media screen and (max-width:767px) { div#page-section-607021392d09fc7af89b174d>.row>.col>.row>.col { width: 50% !important; float: left !important; } div#page-section-607021392d09fc7af89b174d>.row>.col>.row>.col:nth-child(2n+1) { clear: left !important; } div#page-section-607021392d09fc7af89b174d .image-block { padding: 5px; } div#page-section-607021392d09fc7af89b174d .image-block * { margin-bottom: 2px; }} Thanks but this code is still not working ... Link to comment
tuanphan Posted May 26, 2021 Share Posted May 26, 2021 13 hours ago, Esoes_design said: Thanks but this code is still not working ... Did you edit something after post this question? If you change, reorder anyblocks, the code won't work. When you done design, let me know. We will check again. 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 May 26, 2021 Share Posted May 26, 2021 14 hours ago, Ingrid89 said: @tuanphan Thanks for the code for the two columns, however, it only works on my upper row. The rest is still divided. See screenshot. Can you share link to page in screenshot? We will check it again 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
Ingrid89 Posted May 26, 2021 Share Posted May 26, 2021 @tuanphan sure! https://www.guimauve.nl/bracelets (this is the link, password = ingrid). The way I have it right now is with this code below. In mobile view, the upper row is two by two, the rest is still stacked. I would love all my products two by two. @media screen and (max-width:760px) { div#page-section-60acb063f2c8f00460869887>.row>.col>.row>.col> { width: 50% !important; float: left !important; } } Link to comment
tuanphan Posted May 26, 2021 Share Posted May 26, 2021 9 minutes ago, Ingrid89 said: @tuanphan sure! https://www.guimauve.nl/bracelets (this is the link, password = ingrid). The way I have it right now is with this code below. In mobile view, the upper row is two by two, the rest is still stacked. I would love all my products two by two. @media screen and (max-width:760px) { div#page-section-60acb063f2c8f00460869887>.row>.col>.row>.col> { width: 50% !important; float: left !important; } } Dont remove any code in your current code Add this to Design > Custom CSS /* mobile 2 columns */ @media screen and (max-width:767px) { div#page-section-60acb063f2c8f00460869887 .span-12>.row:nth-child(2)>.span-9 { width: 100% !important; } div#page-section-60acb063f2c8f00460869887 .span-9 .span-6 .span-3 { 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
Ingrid89 Posted May 26, 2021 Share Posted May 26, 2021 You solved my problem @tuanphan, thank you!!! Link to comment
Nondys Posted June 26, 2021 Share Posted June 26, 2021 This is so awesome! @tuanphan I would so appriecate your help here! I've been trying to figure this our for the life of me! let's say I wanted a Summary Block to consist of 2 rows of 2 photos on mobile, and still have the ability to use the arrow to scroll to see more images. So it will basically display 4 images at a time on Mobile. I found a code that allows my Summary block to stack in two columns and show all images on mobile, but it'd like it to stack two columns and show only 4 images at a time, with the option to scroll through to see the next set of 4 images. So scrolling by 4 at a time. Code I am using found at: https://www.rebeccagracedesigns.com/blog/summary-two-columns-mobile SEE IMAGE ATTACHED FOR EXMAMPLE @media only screen and (max-width: 640px) { .summary-item-list { display: flex; flex-wrap: wrap; } .summary-item { width: 45% !important; margin: 4vw 2vw !important; } } Link to comment
tuanphan Posted June 28, 2021 Share Posted June 28, 2021 On 6/26/2021 at 7:20 AM, Nondys said: This is so awesome! @tuanphan I would so appriecate your help here! I've been trying to figure this our for the life of me! let's say I wanted a Summary Block to consist of 2 rows of 2 photos on mobile, and still have the ability to use the arrow to scroll to see more images. So it will basically display 4 images at a time on Mobile. I found a code that allows my Summary block to stack in two columns and show all images on mobile, but it'd like it to stack two columns and show only 4 images at a time, with the option to scroll through to see the next set of 4 images. So scrolling by 4 at a time. Code I am using found at: https://www.rebeccagracedesigns.com/blog/summary-two-columns-mobile SEE IMAGE ATTACHED FOR EXMAMPLE @media only screen and (max-width: 640px) { .summary-item-list { display: flex; flex-wrap: wrap; } .summary-item { width: 45% !important; margin: 4vw 2vw !important; } } Did you solve? 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
MoiToi Posted February 13, 2022 Share Posted February 13, 2022 I feel bad asking, as so many others already have. But despite trying pretty much all of the code that you've provided in this thread, I'm not seeing any change on the mobile version - still just single stacked images on mobile. I'm not sure if it's different for me because I'm not dealing with a gallery, but actually 6 separate images (that I'm using as buttons that link to a filtered directory). Hoping to adjust to 2 or 3 wide instead of just single wide when viewed on mobile. site https://cuboid-sailfish-6hlk.squarespace.com/ password OVBIZ So grateful if you have a fix suggestion. Thank you 🙂 Link to comment
tuanphan Posted February 19, 2022 Share Posted February 19, 2022 On 2/14/2022 at 6:09 AM, MoiToi said: I feel bad asking, as so many others already have. But despite trying pretty much all of the code that you've provided in this thread, I'm not seeing any change on the mobile version - still just single stacked images on mobile. I'm not sure if it's different for me because I'm not dealing with a gallery, but actually 6 separate images (that I'm using as buttons that link to a filtered directory). Hoping to adjust to 2 or 3 wide instead of just single wide when viewed on mobile. site https://cuboid-sailfish-6hlk.squarespace.com/ password OVBIZ So grateful if you have a fix suggestion. Thank you 🙂 Hi. Where are images? I don't see 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 14, 2022 Share Posted March 14, 2022 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. 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