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

@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!

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

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!

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

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!

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

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. 

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

Good day,

The image still isn't anchored to the bottom. Please see attached.

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