How do you get an image to stick to the bottom of a section in 7.1?

Site URL: http://www.millscreative.com

Hello! I've been trying to achieve something for a few hours, but I have had no success. So it is time to ask for help. ☝️

My goal is to make a similar layout to this example:  https://www.drift.com/dc/

These features, in particular, stand out:

• The image is aligned and sticks to section bottom
• There's 0 padding between section bottom and the image
• The image is responsive (drops below text in mobile devices)

How might I achieve this with features available in 7.1?

Thanks!

Hi. You can use Image Block, then let me know. We will give the code to achieve above.

I have the image in an image block now, just need to get that block to stick to the bottom of the section. 🙂 Thank you so much for taking a look at this!!!

On 3/1/2021 at 9:58 PM, jasonM said:

I have the image in an image block now, just need to get that block to stick to the bottom of the section. 🙂 Thank you so much for taking a look at this!!!

Hi. Where is image? You mean image in this section: HELLO, I AM JASON MILLS,?

23 hours ago, tuanphan said:

Hi. Where is image? You mean image in this section: HELLO, I AM JASON MILLS,?

Yes, it is the picture of me that I would like to stick to the bottom of that section. 

2 hours ago, tuanphan said:

Add to Design > Custom CSS

/* image to bottom */
@media screen and (min-width:768px) {
[data-section-id="60280e1ac467c7682a023318"] .content-wrapper {
    padding-bottom: 0 !important;
}
div#page-section-60280e1ac467c7682a023318>.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_1614258722517_6384 {
    padding-bottom: 0;
}
}

THANK YOU THANK YOU THANK for this. Works perfect on browser, but does not stick to the bottom on mobile. I don't have a problem with that so much. Let me know how I can repay you!

On 3/7/2021 at 3:43 PM, jasonM said:

THANK YOU THANK YOU THANK for this. Works perfect on browser, but does not stick to the bottom on mobile. I don't have a problem with that so much. Let me know how I can repay you!

Above code run on desktop only.

With mobile, add this code (don't remove current code)

/* Image stick to bottom - mobile */
@media screen and (max-width:767px) {
[data-section-id="60280e1ac467c7682a023318"] .content-wrapper {
    padding-bottom: 0 !important;
}
div#block-yui_3_17_2_1_1614258722517_6384 {
    padding-bottom: 0 !important;
}

}

Hi, I'm trying to do exactly the same but it is not working for me using the codes above - I may have page or content section so I would love some help please!

On 4/9/2021 at 5:28 PM, ASmart24 said:

Hi, I'm trying to do exactly the same but it is not working for me using the codes above - I may have page or content section so I would love some help please!

Hi. Can you share link to page where you have problem? We can help easier

@tuanphan Hi I'm trying to get this to work on the image on this page: https://www.likemindedproductions.co.uk/ashley Can you please help?

13 hours ago, smithandrew1993 said:

@tuanphan Hi I'm trying to get this to work on the image on this page: https://www.likemindedproductions.co.uk/ashley Can you please help?

Hi. Which images?

On 4/27/2021 at 3:37 AM, tuanphan said:

Hi. Which images?

In the circle

On 5/5/2021 at 11:23 PM, smithandrew1993 said:

In the circle

Add to Design > Custom CSS

/* Sticky image to bottom */
section#ashley\/header>.Index-page-content {
    padding-bottom: 0;
}
div#block-yui_3_17_2_1_1619440772572_2005 {
    padding-bottom: 0 !important;
}

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

Strange. I just saw a notification that someone tagged me in this post, but it looks like the latest comment is May 5, 2021.

5 hours ago, tuanphan said:

I just saw a notification that someone tagged me in this post, but it looks like the latest comment is May 5, 2021.

Did you get a notice that the message had been deleted? Or were you just directed to this thread? I've had the latter happen. Could be bugs in the forum software.

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

5 hours ago, NicoleJuniper said:

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

This is not a solution but perhaps a new beginning for the effect.

First remove or comment out any previous attempts at this effect. Save a copy of the CSS somewhere.

Set up you section as follows.

The critical bit is the content alignment.

Add the following to Design > Custom CSS.

.homepage .page-section:first-child.vertical-alignment--bottom:not( .content-collection ):not( .gallery-section ):not( .user-items-list-section ):not( .section-height--custom ) > .content-wrapper,
.homepage .page-section:first-child .sqs-col-5 .sqs-block-image

  {
  
    padding-bottom : 0;
    
    }

This is for v7.1 and specific to the poster's need.

This removes the padding from the bottom giving you the following.

This will break down if the column with the font in it becomes taller than the image column. It may be possible to reduce that from happening with adjusting the size of the font based on viewport width.

There is no way I'm aware of to move the text down the column it is in as the column is floated.

It also broke down when it switched to mobile display. Fixing that may just be a matter fiddling with the mobile padding rules. I didn't get that far.

Let us know if you think something like this might work better for your need.

@tuanphan I have a similar inquiry. On the home page crisivan.com i want the sign to stick to the bottom of the screen at any width size.  I don't want the page to move up or down.  Can i get your help? 

On 12/4/2022 at 7:47 AM, Cris_jedii said:

@tuanphan I have a similar inquiry. On the home page crisivan.com i want the sign to stick to the bottom of the screen at any width size.  I don't want the page to move up or down.  Can i get your help? 

 

 

Try adding to Design > Custom CSS

div#block-f9e4e6da5e116b24a6c6 img {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: TranslateX(-50%);
    object-position: unset !important;
}

Hello i am trying to do the same. ive used the above codings. the original seemed to work  originally but now doesnt? im trying to get the image on the right to align with the bottom of the section

On 3/30/2023 at 4:02 PM, Senshi said:

Hello i am trying to do the same. ive used the above codings. the original seemed to work  originally but now doesnt? im trying to get the image on the right to align with the bottom of the section

Can you share link to page in screenshot? We can help easier