NicoleJuniper Posted December 27, 2021 Share Posted December 27, 2021 Site URL: https://nanopath.squarespace.com/ I need help with my hero image on the home page. The image of the cut out girl needs to be flush to the bottom of the section on all screen sizes. It is currently good on mobile and larger desktop screen sizes. But when I adjust my browser screen size she starts floating and is not flush to the bottom of the section. Any help would be appreciated!! Thank you!! Site password is: Nanopath2021 This is the code I have that is working for most screen sizes. /* Image stick to bottom - mobile */ @media screen and (max-width:767px) { [data-section-id="61b63bd53abfad17364190fe"] .content-wrapper { padding-bottom: 0 !important; } div#block-yui_3_17_2_1_1639332788200_17301 { padding-bottom: 0 !important; } } /* image to bottom */ @media screen and (min-width:768px) { [data-section-id="61b63bd53abfad17364190fe"] .content-wrapper { padding-bottom: 0 !important; } div#page-section-61b63bd53abfad17364190fe>.row { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; } div#block-yui_3_17_2_1_1639332788200_17301 { padding-bottom: 0; } } Link to comment
Beyondspace Posted December 28, 2021 Share Posted December 28, 2021 (edited) On 12/28/2021 at 4:17 AM, NicoleJuniper said: Site URL: https://nanopath.squarespace.com/ I need help with my hero image on the home page. The image of the cut out girl needs to be flush to the bottom of the section on all screen sizes. It is currently good on mobile and larger desktop screen sizes. But when I adjust my browser screen size she starts floating and is not flush to the bottom of the section. Any help would be appreciated!! Thank you!! Site password is: Nanopath2021 This is the code I have that is working for most screen sizes. /* Image stick to bottom - mobile */ @media screen and (max-width:767px) { [data-section-id="61b63bd53abfad17364190fe"] .content-wrapper { padding-bottom: 0 !important; } div#block-yui_3_17_2_1_1639332788200_17301 { padding-bottom: 0 !important; } } /* image to bottom */ @media screen and (min-width:768px) { [data-section-id="61b63bd53abfad17364190fe"] .content-wrapper { padding-bottom: 0 !important; } div#page-section-61b63bd53abfad17364190fe>.row { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; } div#block-yui_3_17_2_1_1639332788200_17301 { padding-bottom: 0; } } Try @media only screen and (min-width: 768px) { section[data-section-id="61b63bd53abfad17364190fe"] .content-wrapper { position: absolute; bottom: 0; box-sizing: border-box !important; } #block-yui_3_17_2_1_1639332788200_18972 { padding-bottom: 0; } section[data-section-id="61b63bd53abfad17364190fe"] .content > .sqs-layout > .row > .span-12 > .row { display: flex; } section[data-section-id="61b63bd53abfad17364190fe"] .content > .sqs-layout > .row > .span-12 > .row > .span-5 { align-self: flex-end; } } Let me know how it works on your site Support me by pressing 👍 if this useful for you Edited December 29, 2021 by bangank36 BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date format) 💫 Animated Buttons (Referral URL) 🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations) 🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget 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
Beyondspace Posted December 28, 2021 Share Posted December 28, 2021 My testing result BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date format) 💫 Animated Buttons (Referral URL) 🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations) 🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget 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
NicoleJuniper Posted December 28, 2021 Author Share Posted December 28, 2021 Thank you @bangank36 That seems to help! But in some screen sizes she is still floating. See my screen shot below. Link to comment
NicoleJuniper Posted December 28, 2021 Author Share Posted December 28, 2021 (edited) @bangank36 Do you have any suggestions on how to fix this? Thank you! Edited December 28, 2021 by NicoleJuniper Link to comment
Beyondspace Posted December 29, 2021 Share Posted December 29, 2021 10 hours ago, NicoleJuniper said: @bangank36 Do you have any suggestions on how to fix this? Thank you! I've just updated some additional Css codes, try again and check if it works properly on your site BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date format) 💫 Animated Buttons (Referral URL) 🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations) 🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget 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
melody495 Posted July 31 Share Posted July 31 @NicoleJuniper @Beyondspace Hey, I am having the same problem. Would you be able to share the latest code please? The last edit wasn't share here. Thank you! -------- > 👆 <---------- Please quote or @ me when replying, or I won't get a notification 🙋♀️Techy SquareSpace Developer for all your customisation needs #CSS #html #javascript ✉️ Email me 💻Soft launch https://www.melodylee.tech/ A software developer in an artist body that knows how marketing works. UK based, work globally #neverstoplearning ☕ I like coffee 😊 Link to comment
tuanphan Posted August 1 Share Posted August 1 22 hours ago, melody495 said: Hey, I am having the same problem. Would you be able to share the latest code please? The last edit wasn't share here. Thank you! If you share link to page where you have problem, we can help easier Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
PixlePop Posted August 9 Share Posted August 9 Hello. I am having the same issue with my homepage image. I would like the image to be directly on the bottom for both desktop and mobile without scrolling. Thank you! Link to comment
tuanphan Posted August 11 Share Posted August 11 On 8/10/2023 at 4:14 AM, PixlePop said: Hello. I am having the same issue with my homepage image. I would like the image to be directly on the bottom for both desktop and mobile without scrolling. Thank you! What is your homepage url? We can check easier Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
PixlePop Posted August 13 Share Posted August 13 On 8/10/2023 at 11:52 PM, tuanphan said: What is your homepage url? We can check easier http://www.shalayaholliday.com/ Sorry! I thought I added that! Link to comment
tuanphan Posted August 15 Share Posted August 15 On 8/13/2023 at 11:46 PM, PixlePop said: http://www.shalayaholliday.com/ Sorry! I thought I added that! Try adding to Design > Custom CSS or Website > Website Tools > Custom CSS /* Float image to bottom */ div#block-yui_3_17_2_1_1691613974173_1727 .sqs-image { justify-content: flex-end !important; } div#block-yui_3_17_2_1_1691613974173_1727 .sqs-image>div { position: absolute !important; bottom: -10px !important; } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
PixlePop Posted August 15 Share Posted August 15 3 hours ago, tuanphan said: Try adding to Design > Custom CSS or Website > Website Tools > Custom CSS /* Float image to bottom */ div#block-yui_3_17_2_1_1691613974173_1727 .sqs-image { justify-content: flex-end !important; } div#block-yui_3_17_2_1_1691613974173_1727 .sqs-image>div { position: absolute !important; bottom: -10px !important; } Hi, I added please see attached. The image is still not flush to the bottom. There is still a gap. Link to comment
tuanphan Posted August 19 Share Posted August 19 Use this new code. Then check in incognito window /* Float image to bottom */ div#block-yui_3_17_2_1_1691613974173_1727 .sqs-image { justify-content: flex-end !important; } div#block-yui_3_17_2_1_1691613974173_1727 .sqs-image>div { position: absolute !important; bottom: -10px !important; } body.homepage article section:first-child { height: 100vh !important; min-height: unset !important; } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
PixlePop Posted September 26 Share Posted September 26 Good day, The image still isn't anchored to the bottom. Please see attached. Link to comment
tuanphan Posted October 1 Share Posted October 1 On 9/26/2023 at 10:35 PM, PixlePop said: Good day, The image still isn't anchored to the bottom. Please see attached. You need to add code to Custom CSS, not Code Injection Scroll under Not Linked > You will see Website Tools > Click on it and choose Custom CSS Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care 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