Need to force image to bottom right

[Historical Forums User]

I’m having a nutty problem with a WordPress situation involving one of those “page builder” environments. I was thinking of solving it by simply hand coding the content, but that creates problems for the client because as soon as they go to edit the page themselves after I’m done, they will break it. So I need to stay within the page builder environment.

Here’s the problem:

I have content in a 2/3 width column and I want a photo in the 1/3 column on the right, but I need to have the photo align tightly to the bottom of the column area. That’s because it’s a close-cropped image of a person so they need to look as if they are coming up out of the box below this content.

The row has a left-column block with several “page builder” blocks including a heading block, a text block and a gap at the bottom so that the bottom of the text doesn’t butt up against the block below.

Then there’s a right-column block where all I want is the image aligned to the very bottom. With this arrangement, the image would get progressively smaller on some screens, still taking up only 1/3 of the horizontal space, and then fill the screen width on very small devices like phones, placed below the 2/3 text block. In this way, the image would still butt up against the next block in the sequence.

Everything I’ve tried so far has failed, and I’ve tried so many things I’ve lost count of everything. I’ve tried setting it as a background image in a right-column text block, I’ve tried using a raw HTML box with absolute positioning, and simply putting the image with a bottom alignment. The problem is that the right side box doesn’t go the full height of the left-side text column even when I tell it to be 100% height. So every time the image ends up falling short of the very bottom. When I’ve tried using absolute positioning, it breaks on mobile screens because then it obscures text.

Any ideas what I can do?

[Paulie_D]

Perhaps a reduced case in Codepen.io so we can look at it.?

An image of what this is supposed to look like would also be useful because I’m having trouble seeing what you are trying to so.

[Historical Forums User]

Thanks for your help guys. Unfortunately I can’t provide a link because the site is behind a development screen. But I’ve attached a couple of screen shots below to help.

Wolfcry911, you helped by asking about the container. It made me think of a new approach, where I created a new raw HTML container just inside the content container and then set the image in that. I tried using a background image, but it created all kinds of challenges, so I used a regular image. Because the content container is a 2/3+1/3 arrangement with the 1/3 column blank, I can place the image to the right with a max-width of 35% and it works well without encroaching on the text. But it breaks on very small screen sizes because then the text switches to 100% width.

I think I can resolve this by adding a new class and forcing the content to clear first on small screen sizes. But before I do that I thought perhaps someone had a more elegant solution.

Here’s the way it looks now with a normal screen size

Here’s the way it looks on a tablet

Here’s the way it looks on a phone

[Historical Forums User]

Thanks again for your response.

It is a media query that determines the 100% text width. I was hesitant to add padding to that because the image changes height depending on the screen size (it’s based on a max-width attribute so that it fills the device width for better impact). But I can change that so that the image has a static height and then the padding would work fine. Once the media query kicks in, there’s only 800px left in width so it won’t be a big deal.

[Author]

Posts