Jump to content

Need to align image flush to bottom of section on all screen sizes

Recommended Posts

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
  • Replies 5
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

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 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 Highlighter
If 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

My testing result

image.thumb.png.0fa7b85f17fcd90ec1d90cd0ce35f104.png

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 Highlighter
If 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
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 Highlighter
If 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

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.