[Resolved] Align Bottom

[Kim]

Hi,

I try to replicate the section on your homepage and can’t get the image to be aligned to the bottom (hope, you know what I mean ;-)). How can I achieve this?

Many thanks!

[Leo]

Hi there,

Which section are you referring to?

[Kim]

The first one on this site for example:

https://generatepress.com/premium/

[Leo]

It’s using page header with some custom coding: http://www.screencast.com/t/9lDxrUPTWm

If you use the browsers developer tool, you can copy the HTML structure along with the CSS that comes with it.

The align bottom is achieved by this CSS:

@media (min-width: 1024px) {
    .add-on-image {
        display: block;
        position: absolute;
        right: 0;
        bottom: 0;
    }
}

[Kim]

Hi Leo,

unfortunately this does not solve my problem. I want to align an image with the bottom of a section or page header (s. Screenshot). I’ve added the image within a two column grid. Do you have another suggestion for me?

Many thanks!

https://www.dropbox.com/s/3lz9wg6a6qk7x0j/screenshot.png?dl=0

[Leo]

Can you link me to the actual page?

[Kim]

Hi Leo,

unfortunately it is private at the moment.

[Leo]

It’s basically impossible to provide code without seeing the site unfortunately.

Can you put it on a staging server?

[Kim]

I’ve tried to add style=”vertical-align: bottom;” to the image (as in your demo), but it doesn’t work.

I will come back when the site is online.

[Leo]

Sounds good. We will be here 🙂

[Kim]

Hi Leo,

coming back to this issue. I want to align the picture of the woman (third section on the homepage) to to bottom of the section…hope you know what I mean.

[Leo]

Can you try this CSS:

.inside-grid-column {
    margin-bottom: 0;
}

[Kim]

That’s it!!! Many thanks 🙂

[Leo]

No problem!

[Kim]

Hi Leo,

unfortunately the CSS doesn’t work anymore after the update of the Lightweight Grid Columns Plugin. Do I have to change something?

[Author]

Posts