By Stephen Walker

Contain Images

Share

This challenge came from the Theme Fusion forum. A user wanted to know how to constrain the height of a column with a background image to the height of the text in an adjacent column. While this sounds easy enough and the solution is simple, it was a little confusing at first because the column with the background image was always reverting to a size that matched the minimum height to proved a full version of the image.

To make matters worse, in live edit it appears correct, but once the page is rendered, the problem appears (image height below). This is happening because for some reason, when the page is rendered, Avada is injecting the empty placeholder svg image that is forcing the column to react. This does not get injected when another element is added. Oddly enough, in moving this content from the old site to this one, the behavior goes away, so this demo is not working the same way.

The solution is to drop a spacer element with no settings applied into the empty column and the problem goes away. The height of the background image is limited to the height of the content.

This is also related to a feature request I submitted some months ago to give us the ability to choose the background size and not tied to “cover” as the only option. You can submit a similar request if you think it is important.

Photo by Alison Pang on Unsplash

Image height

aliquet risus feugiat in ante metus dictum at tempor commodo ullamcorper a lacus vestibulum.

Content Height

This is a nested column showing the desired layout by simply adding the spacer.

Content Height

aliquet risus feugiat in ante metus dictum at tempor commodo ullamcorper a lacus vestibulum sed arcu non odio euismod lacinia at quis risus sed vulputate odio ut enim blandit volutpat

Originally published on July 11, 2021

Most Advanced WordPress Form Builder

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

RELATED ARTICLES

  • Quick Tip: Faux Nested Columns

    Overcoming a shortcoming in Avada with some CSS.

  • Targeting the Boxes

    I put together a quick demo to highlight the containers that do not have settings, but that can be targeted with CSS.

  • Food Menu

    This is a style for creating a food menu whit a dashed line between the item and the price.

  • Horizontal Scrolling Columns and Column Overlays

    This weekend I put together to examples as a result of requests and conversations on the Facebook group.

  • Customizing the Off Canvas Background

    Styling the off-canvas element is "easy" if you know which part to target.

  • Customizing Toggle (Accordion) Headings

    In a recent project and for this site's new menu, I needed to change the default of the toggle heading and place the icon on the right side but not pushed the full width of the toggle panel. Fortunately, this is easy to do with a couple of lines of CSS.