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

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;
}
}

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

My testing result

Thank you @bangank36

That seems to help! But in some screen sizes she is still floating. See my screen shot below.

@bangank36 Do you have any suggestions on how to fix this? Thank you!

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