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

13 answers to this question

Recommended Posts

  • 0

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

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.

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

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

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
Posted (edited)
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.

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.

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.

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.

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

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...