katemelvindesign Posted January 1, 2022 Share Posted January 1, 2022 Hi @tuanphan -- Thank you for all your help in this thread! I am having trouble getting this to work for my own site. I'm rebuilding my home page here: https://katemelvin.com/home-1 I tried using this code found in this thread but it's not working. Any idea? Quote @media screen and (max-width:767px) { div#page-section-61ce35e89673080e2f919022>.row>.col>.row>.col { width: 50% !important; float: left !important; } } Thank you 🙂 Link to comment
tuanphan Posted January 2, 2022 Share Posted January 2, 2022 17 hours ago, katemelvindesign said: Hi @tuanphan -- Thank you for all your help in this thread! I am having trouble getting this to work for my own site. I'm rebuilding my home page here: https://katemelvin.com/home-1 I tried using this code found in this thread but it's not working. Any idea? Thank you 🙂 Hi. Which images on the page? 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
katemelvindesign Posted January 2, 2022 Share Posted January 2, 2022 @tuanphan I was trying to do this with the project images on my homepage katemelvin.com. I think I got it working though through trying out your snippets of code. Thank you! Link to comment
tuanphan Posted January 4, 2022 Share Posted January 4, 2022 (edited) On 1/3/2022 at 3:23 AM, katemelvindesign said: @tuanphan I was trying to do this with the project images on my homepage katemelvin.com. I think I got it working though through trying out your snippets of code. Thank you! Did you solve or still need help? Also, do you want to keep desktop menu on mobile/tablet, to the header will be: Logo - Home/About? (You can create a new question or send me a message) Edited January 4, 2022 by tuanphan 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
Tatsiana Posted February 8, 2022 Share Posted February 8, 2022 wow @tuanphan, you're so helpful! Hi, could you please help me with my website too, if possible? I'd like to change mobile view for those two pages:https://cossetceramics.com/sculpturehttps://cossetceramics.com/lighting Preferably, identical to the desktop version with a combination of 1 to 3 images per row. If this is not possible, I would like to have 3 images per row throughout all page. Thank you very much and I hope you have a lovely day. Warm regards, Tatsiana Link to comment
tuanphan Posted February 13, 2022 Share Posted February 13, 2022 On 2/9/2022 at 6:27 AM, Tatsiana said: wow @tuanphan, you're so helpful! Hi, could you please help me with my website too, if possible? I'd like to change mobile view for those two pages:https://cossetceramics.com/sculpturehttps://cossetceramics.com/lighting Preferably, identical to the desktop version with a combination of 1 to 3 images per row. If this is not possible, I would like to have 3 images per row throughout all page. Thank you very much and I hope you have a lovely day. Warm regards, Tatsiana Hi. With sculpture page, try adding this to Design > Custom CSS /* Sculpture mobile */ @media screen and (max-width:767px) { div#page-61fe5587c48bb04a45c8de05 .span-4 { width: 33.3333% !important; float: left !important; } div#page-61fe5587c48bb04a45c8de05 .span-6 { width: 50% !important; float: left !important; } } With lighting, use this code /* lighting mobile */ @media screen and (max-width:767px) { div#page-5f881df7cd44cc5a9ec1b154 .span-4 { width: 33.3333% !important; float: left !important; } div#page-5f881df7cd44cc5a9ec1b154 .span-6 { width: 50% !important; float: left !important; } } Tatsiana 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
gabs_mol Posted March 20, 2022 Share Posted March 20, 2022 On 12/14/2020 at 3:53 PM, TOMweb said: Add to Design > Custom CSS @media screen and (max-width:767px) { div#page-section-YOURSECTIONID>.row>.col>.row>.col { width: 50% !important; float: left !important; } } 🙂 hi I just wondered if you could help - I want to move all of the payment method images in my footer into a row on mobile view but I can't figure out how to do it - the website address is:https://lavender-greyhound-hr46.squarespace.com/ and the PW is: ddh22 Link to comment
tuanphan Posted March 21, 2022 Share Posted March 21, 2022 On 3/20/2022 at 8:50 AM, gabs_mol said: hi I just wondered if you could help - I want to move all of the payment method images in my footer into a row on mobile view but I can't figure out how to do it - the website address is:https://lavender-greyhound-hr46.squarespace.com/ and the PW is: ddh22 Add to Design > Custom CSS /* Mobile Payment icons */ @media screen and (max-width:767px) { div#block-f7fe8092d14d29a5e9c3+.row>.span-1 { width: 25% !important; float: left !important; } div#block-f7fe8092d14d29a5e9c3+.row>.span-7 { width: 75% !important; float: left !important; } div#block-f7fe8092d14d29a5e9c3+.row>.span-7 .span-1 { width: 33.3333% !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
Anele0610 Posted March 25, 2022 Share Posted March 25, 2022 Hello! Working on putting card images side by side. Desktop - 4 side by side, mobile would love to have 2 side by side. Used this code: div#block-yui_3_17_2_1_1647003021702_10784~.row .span-3 { width: 50% !important; float: left !important; } div#page-section-6227626aae998921f9a40009 .span-3 { clear: left !important; } But I'm having weird gaps, check screenshots. Obviously don't want that. Website: https://bird-apricots-y5tt.squarespace.com/ Password: notyetready Link to comment
tuanphan Posted March 26, 2022 Share Posted March 26, 2022 18 hours ago, Anele0610 said: Hello! Working on putting card images side by side. Desktop - 4 side by side, mobile would love to have 2 side by side. Used this code: div#block-yui_3_17_2_1_1647003021702_10784~.row .span-3 { width: 50% !important; float: left !important; } div#page-section-6227626aae998921f9a40009 .span-3 { clear: left !important; } But I'm having weird gaps, check screenshots. Obviously don't want that. Website: https://bird-apricots-y5tt.squarespace.com/ Password: notyetready Hi. It looks fine to me. Did you solve it? 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
Anele0610 Posted March 29, 2022 Share Posted March 29, 2022 On 3/26/2022 at 9:27 AM, tuanphan said: Hi. It looks fine to me. Did you solve it? Yes, I solved that part, however the exact same section has a different problem - the first row has social links and on mobile they are not clickable. other rows are fine. link: metatrekkers.io section: Team on homepage Link to comment
tuanphan Posted March 31, 2022 Share Posted March 31, 2022 On 3/29/2022 at 11:19 PM, Anele0610 said: Yes, I solved that part, however the exact same section has a different problem - the first row has social links and on mobile they are not clickable. other rows are fine. link: metatrekkers.io section: Team on homepage Hi, You haven't set clear attribute when using float, so the problem appear Don't remove any code in your current code. Add this to Design > custom CSS /* Team section icons not clickable */ @media screen and (max-width:767px) { div#block-yui_3_17_2_1_1647003021702_10784~.row .span-6 { clear: both !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
Anele0610 Posted April 4, 2022 Share Posted April 4, 2022 Hello @tuanphan! Having the problem of putting images side-by-side on mobile. link: http://metatrekkers.io/the-team Thank you! Link to comment
tuanphan Posted April 5, 2022 Share Posted April 5, 2022 14 hours ago, Anele0610 said: Hello @tuanphan! Having the problem of putting images side-by-side on mobile. link: http://metatrekkers.io/the-team Thank you! Add to Design > Custom CSS /* Mobile images side by side */ @media screen and (max-width:767px) { div#page-section-624b260eac53a13d4b644746 .span-3 { width: 50% !important; float: left !important; } div#page-section-624b260eac53a13d4b644746 .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
Anele0610 Posted April 19, 2022 Share Posted April 19, 2022 On 4/5/2022 at 11:07 AM, tuanphan said: Add to Design > Custom CSS /* Mobile images side by side */ @media screen and (max-width:767px) { div#page-section-624b260eac53a13d4b644746 .span-3 { width: 50% !important; float: left !important; } div#page-section-624b260eac53a13d4b644746 .span-3:nth-child(2n+1) { clear: left !important; }} Hey @tuanphan! It doesn't work 😞 Any other ideas? Anele Link to comment
tuanphan Posted April 22, 2022 Share Posted April 22, 2022 On 4/20/2022 at 3:59 AM, Anele0610 said: Hey @tuanphan! It doesn't work 😞 Any other ideas? Anele Try checking again when you're log out. Recently SS has a bug, prevent CSS show on Editing Mode. 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
joannfotografie Posted April 23, 2022 Share Posted April 23, 2022 Hello @tuanphan ! Thanks for all the help so far, I have another question. Been trying to do this, have them now hidden on mobile, but want them next to each other, all five if possible. Code should be on 174 Anything I tried just split the images in half for some reason. https://gold-cheetah-exh9.squarespace.com/home PW: Geheim123 Link to comment
tuanphan Posted April 24, 2022 Share Posted April 24, 2022 19 hours ago, joannfotografie said: Hello @tuanphan ! Thanks for all the help so far, I have another question. Been trying to do this, have them now hidden on mobile, but want them next to each other, all five if possible. Code should be on 174 Anything I tried just split the images in half for some reason. https://gold-cheetah-exh9.squarespace.com/home PW: Geheim123 Remove your display none code & add this /* Mobile home show 5 images same line */ @media screen and (max-width:767px) { div#page-section-62251dd1b2a4724c0a2faf8d .span-2 { width: 20% !important; float: left !important; } div#page-section-62251dd1b2a4724c0a2faf8d .span-2 .image-block { padding: 0; width: 90%; margin: 0 auto; }} 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
joannfotografie Posted April 26, 2022 Share Posted April 26, 2022 On 4/24/2022 at 9:55 AM, tuanphan said: Remove your display none code & add this /* Mobile home show 5 images same line */ @media screen and (max-width:767px) { div#page-section-62251dd1b2a4724c0a2faf8d .span-2 { width: 20% !important; float: left !important; } div#page-section-62251dd1b2a4724c0a2faf8d .span-2 .image-block { padding: 0; width: 90%; margin: 0 auto; }} This works, thank you so much! Link to comment
Anele0610 Posted April 27, 2022 Share Posted April 27, 2022 On 4/22/2022 at 5:11 PM, tuanphan said: Try checking again when you're log out. Recently SS has a bug, prevent CSS show on Editing Mode. No it doesnt work even when logged out 😞 Link to comment
tuanphan Posted April 30, 2022 Share Posted April 30, 2022 On 4/27/2022 at 3:53 PM, Anele0610 said: No it doesnt work even when logged out 😞 Try adding this new code @media screen and (max-width:767px) { div#page-section-624b260eac53a13d4b644746 .span-3 { width: 50% !important; float: left !important; } div#page-section-624b260eac53a13d4b644746 .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
kellicox90 Posted April 21, 2023 Share Posted April 21, 2023 (edited) Id also like to piggy back onto this thread, I have 2x images in the footer of a clients site that look huge on mobile, id like to place them side by side but cant seem to get the codes in the thread to work. https://lime-raspberry-ywg5.squarespace.com/ PW GSR123 These are the 2 images that i'd like to be placed side by side on mobile. They are in the footer. Edited April 21, 2023 by kellicox90 Link to comment
tuanphan Posted April 23, 2023 Share Posted April 23, 2023 On 4/21/2023 at 7:19 AM, kellicox90 said: Id also like to piggy back onto this thread, I have 2x images in the footer of a clients site that look huge on mobile, id like to place them side by side but cant seem to get the codes in the thread to work. https://lime-raspberry-ywg5.squarespace.com/ PW GSR123 These are the 2 images that i'd like to be placed side by side on mobile. They are in the footer. Add to Design > Custom CSS /* Mobile Footer Images */ @media screen and (max-width:767px) { div#block-yui_3_17_2_1_1680055391599_144574+.row .span-2 { 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
kellicox90 Posted April 25, 2023 Share Posted April 25, 2023 On 4/23/2023 at 10:45 AM, tuanphan said: Add to Design > Custom CSS /* Mobile Footer Images */ @media screen and (max-width:767px) { div#block-yui_3_17_2_1_1680055391599_144574+.row .span-2 { width: 50% !important; float: left !important; } } Thanks @tuanphan This works perfectly, I'm just trying to get it to do the same thing on my /towing page (I've used an alternative footer for this section but with the same images that i'd like to be side by side) I cant seem to replicate it and get it to work, are you able to see? Link to comment
tuanphan Posted April 25, 2023 Share Posted April 25, 2023 3 hours ago, kellicox90 said: Thanks @tuanphan This works perfectly, I'm just trying to get it to do the same thing on my /towing page (I've used an alternative footer for this section but with the same images that i'd like to be side by side) I cant seem to replicate it and get it to work, are you able to see? Use this code @media screen and (max-width:640px) { div#page-section-63ffad66f528547186f9170f>.row:nth-child(3) .span-2 { 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