NicoleJuniper

@tuanphan @creedon Yes I tagged you! I'm looking for a similar solution. I will copy and paste my most recent comment here. 

Im having an issue with the person on the hero image sticking to the bottom of the section no matter the screen size. When you adjust your browsers size she starts to float again

The website is nanopath.squarespace.com

Password is Nanopath2021

Ive used this code and it works fine when the webpage is full size and works on mobile but doesn't work on different sizes if you adjust your browser. below is an example of what I mean 

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

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

Thank you @bangank36

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

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

@tuanphan Hi. Ive used this code and it works fine when the webpage is full size and works on mobile but doesn't work on different sizes if you adjust your browser. below is an example of what I mean 

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

@derricksrandomviews I'm looking to have the image flush to the bottom of the section. How can this be achieved with spacer blocks? 

Site URL: https://drum-heron-a5gc.squarespace.com/

Hello, 

I would like to align my hero image flush to the bottom like the example ive shown here. You can check my site to see how it's currently looking. Thanks!