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 Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword HighlighterIf you find my answer fit your need, 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 Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword HighlighterIf you find my answer fit your need, 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 Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword HighlighterIf you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. 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