How can I lock an element to the bottom edge of another element?

Design help General
1

Hi there,
I’m working on a website and having some trouble formatting it exactly how I want. My biggest problem right now is that I can’t figure out how to keep this blurb about where we’re accepting new clients, locked to the bottom of the splash image. Here’s an image of what it looks like in the editor under normal circumstances, and how it SHOULD look:

image
image2248×1219 527 KB

However, at different window sizes, the blurb about accepting new clients shifts below the hero image, or even shifts off screen completely:

64328696_1159040180935547_7995182720739180544_n
64328696_1159040180935547_7995182720739180544_n1600×2560 169 KB
64500439_396247160978557_2464570659578052608_n
64500439_396247160978557_2464570659578052608_n2560×1600 208 KB

Any help would be greatly appreciated!

Here is my site Read-Only: LINK

2

Do this to your div block that you are aligning to the bottom.
27%20PM

Also remove height from it on your tablet breakpoint.

3

Usually setting the parent element to relative and the children to an absolute will solve your problem.

1 Like