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

brown wooden poles under blue sky during daytimeTwo Column Full Height and Width
red and black number 8Shifting to the Block

Leave a Reply

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

RELATED ARTICLES

  • Read Using Font Awesome Sharp Icons

    Using Font Awesome Sharp Icons

    Here is a quick tip on using the latest icons from Font Awesome.

    April 1, 2023

  • Read 2 Code Snippets for Table of Contents

    2 Code Snippets for Table of Contents

    Two snippets to change behaviors and usability of the Avada table of contents element.

    April 1, 2023

  • Read Customizing Post Pagination

    Customizing Post Pagination

    In this article, I show how CSS can be used to customize the Avada pagination element.

    February 20, 2023

  • Read Accordion Cards

    Accordion Cards

    Another custom accordion example using pseudo element.

    February 17, 2023

  • Read Moving away from builder settings

    Moving away from builder settings

    I am beginning to restructure my site to rely less and less on the Avada element settings in favor of site-wide styling.

    February 12, 2023

  • Read Horizontal Image Accordion

    Horizontal Image Accordion

    I just added a demo of an accordion-style image slider using nothing but Avada and some custom CSS.

    February 11, 2023