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
Go to solution Solved by tuanphan,

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 post
  • Answers 9
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

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

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#pa

Posted Images

9 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

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

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

}

 

Link to post
  • 0

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!

Link to post
  • 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

Link to post

Create an account or sign in to comment

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


×
×
  • Create New...