vertically consistent boxed content in a row

[lbdesign]

I am trying to make a page with a series of rows.
Each row has three 1/3 width items: a boxed text element, and two image elements. The images are the same height.
The boxed text floats vertically by default in the middle of the row. I want to color the box and have the text box color background fill to the same height as the other items in the row (the two pictures). I’m attaching two pictures showing the layout elements, and the resulting output. You can see the background color of the boxed text box doesn’t extend to the top or bottom of the row.

How can I get the background fill of the boxed content to extend to the top and bottom of the row?

thank you.

Attachments:

You must be logged in to view attached files.

[Rui Guerreiro – SUPPORT]

Hi,

Can you provide that page url and admin credentials so I can give it a try?
Use the private reply.

-Rui

[lbdesign]

This reply has been marked as private.

[Mohammad – SUPPORT]

Hi,
I am getting this error.
ACCOUNT PENDING: Your account is currently not active. An administrator needs to activate your account before you can login.

Thanks
Mohammad

[lbdesign]

Sorry, there’s extra security I forgot about. It’s fixed, please try again.

[Mohammad – SUPPORT]

Hi,
I have resolved the issue so please check it now.
Thanks
Mohammad

[lbdesign]

Thanks! I see you set a minimum height for the text box with border. That works great on desktop, but leaves extra room when the window shrinks for phones/smaller devices. If the min height is the only CSS fix, should I revert to using a background image to create the color instead?

[Rui Guerreiro – SUPPORT]

Hi,

You can place Mohammad code inside the media query below, this way it will only be active in resolution higher than 1024.

@media only screen and (min-width: 1024px) {

/*place the code here and remove this line*/

}

-Rui

[lbdesign]

Oh, that’s better than my idea! Thanks all!

[Mohammad – SUPPORT]

Hi,
We are glad 🙂 that your issue resolved.
Thanks
Mohammad