Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

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


jasonM

Question

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!

Edited by jasonM
simplify
Link to comment

18 answers to this question

Recommended Posts

  • 0
On 3/4/2021 at 6:59 PM, jasonM said:

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

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

image.thumb.png.3f5254c14741343d14d0e8b3e7da65da.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 1
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 1

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

Screen Shot 2021-12-27 at 12.17.18 PM.png

Screen Shot 2021-12-27 at 12.17.23 PM.png

Link to comment
  • 0
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,?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
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;
}
}

image.thumb.png.3f5254c14741343d14d0e8b3e7da65da.png

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!

Edited by jasonM
Link to comment
  • 0
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;
}

}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
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?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 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.

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
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.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
  • 0

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

Link to comment
  • 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.

214074965_ScreenShot2021-12-28at5_42_24PM.png.c035535516d143efded3d66513a3c65f.png

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.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

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...