michaelpga Posted October 28, 2021 Share Posted October 28, 2021 Site URL: https://www.bloomhomes.com.au Hello, My mobile site footer layout is displaying in an overlap and all over the place. Can you please help me fix this issue, thanks. See screenshots attached www.bloomhomes.com.au Version7.1 Link to comment
Beyondspace Posted October 28, 2021 Share Posted October 28, 2021 39 minutes ago, michaelpga said: Site URL: https://www.bloomhomes.com.au Hello, My mobile site footer layout is displaying in an overlap and all over the place. Can you please help me fix this issue, thanks. See screenshots attached www.bloomhomes.com.au Version7.1 Is it the result you want to achieve? BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox, video lightbox and much more) 🗓️ Delivery Date Picker (Squarespace Date picker form field) 💫 Gallery block 7.1 workaround 🥳 No-code customisations for Squarespace (+100 Spark plugin customisations) 🥳 Freemium Squarespace Widget Templates (+1000 Elfsight Templates) If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
michaelpga Posted October 28, 2021 Author Share Posted October 28, 2021 @bangank36 Yes, that is the result I'd like to achieve but with a bit of extra white spacing at the top of the footer too. Thank you Link to comment
Beyondspace Posted October 28, 2021 Share Posted October 28, 2021 (edited) 33 minutes ago, michaelpga said: @bangank36 Yes, that is the result I'd like to achieve but with a bit of extra white spacing at the top of the footer too. Thank you You can try adding to Home > Design > Custom Css @media only screen and (max-width: 767px) { section[data-section-id="611b2db797fff6700c9cf9c4"] { padding-top: 110px; padding-bottom: 185px; } } Let me know if it works properly on your site Support me by pressing 👍 if this useful for you Edited October 28, 2021 by bangank36 BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox, video lightbox and much more) 🗓️ Delivery Date Picker (Squarespace Date picker form field) 💫 Gallery block 7.1 workaround 🥳 No-code customisations for Squarespace (+100 Spark plugin customisations) 🥳 Freemium Squarespace Widget Templates (+1000 Elfsight Templates) If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
michaelpga Posted October 29, 2021 Author Share Posted October 29, 2021 Hello @bangank36 , This HTML did not seem to work. Please take a look at my screenshot. Link to comment
Beyondspace Posted October 29, 2021 Share Posted October 29, 2021 20 hours ago, bangank36 said: You can try adding to Home > Design > Custom Css @media only screen and (max-width: 767px) { section[data-section-id="611b2db797fff6700c9cf9c4"] { padding-top: 110px; padding-bottom: 185px; } } Let me know if it works properly on your site Support me by pressing 👍 if this useful for you Can you remove this code from your site to check it again? BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox, video lightbox and much more) 🗓️ Delivery Date Picker (Squarespace Date picker form field) 💫 Gallery block 7.1 workaround 🥳 No-code customisations for Squarespace (+100 Spark plugin customisations) 🥳 Freemium Squarespace Widget Templates (+1000 Elfsight Templates) If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
michaelpga Posted October 30, 2021 Author Share Posted October 30, 2021 23 hours ago, bangank36 said: Can you remove this code from your site to check it again? Hello again, unfortunately this code did not work either. Can you please help me to place the logo to the left and the text just to the right of the logo? Thank you Link to comment
tuanphan Posted October 31, 2021 Share Posted October 31, 2021 @michaelpga Don't remove any code in your current code. Add this to Design > Custom CSS /* Mobile footer */ @media screen and (max-width:767px) { div#page-section-611b2db797fff6700c9cf9c4>.row>.span-1 { width: 30% !important; float: left !important; } div#page-section-611b2db797fff6700c9cf9c4>.row>.span-8 { width: 70% !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
michaelpga Posted November 1, 2021 Author Share Posted November 1, 2021 13 hours ago, tuanphan said: @michaelpga Don't remove any code in your current code. Add this to Design > Custom CSS /* Mobile footer */ @media screen and (max-width:767px) { div#page-section-611b2db797fff6700c9cf9c4>.row>.span-1 { width: 30% !important; float: left !important; } div#page-section-611b2db797fff6700c9cf9c4>.row>.span-8 { width: 70% !important; float: left !important; } } Perfect, that worked. 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