How can I make my columns display as the same height in Webflow, even when they contain paragraphs of text that are different lengths?

Published on
September 22, 2023

To make columns display as the same height in Webflow, even when they contain paragraphs of text that are different lengths, you can use a combination of Webflow's built-in features and custom CSS. Here's a step-by-step guide:

  1. Determine the parent container: Identify the element that contains the columns you want to make the same height. This could be a section, a div block, or any other container element.

  2. Set display property: Set the display property of the parent container to "Flex." This allows you to use flexbox to align the columns.

  3. Wrap columns in div blocks: Wrap each column in a separate div block element. These div blocks will act as the individual columns within the parent container.

  4. Apply flex properties: Select the parent container, and in the Webflow Style panel, go to the Flex layout section. Set the following properties:

  • Flex Direction: Choose "Row" to display the columns horizontally in a row.
  • Justify Content: Select "Stretch" to make the columns stretch to the full height of the parent container.
  1. Adjust div block settings: Select each of the div block elements that represent the columns, and apply the following custom CSS:
  • Height: Set the height to 100% to ensure the columns fill the height of the parent container.
  • Overflow: Set overflow to "hidden" to prevent the columns from extending beyond their container.
  1. Add content to columns: Add your desired content, including paragraphs of varying lengths, to each column.

  2. Adjust text settings: To align the text within the columns, select each paragraph element and apply the necessary text settings, such as alignment and spacing.

  3. Preview and adjust: Preview your website and make any necessary adjustments to the height or styling of the columns and their content.

By following these steps, you can ensure that your columns display as the same height in Webflow, regardless of the length of the text they contain.

Additional Questions:

  1. How can I create equal-height columns in Webflow?
  2. Can I use Flexbox to make columns equal height in Webflow?
  3. Are there any plugins or extensions available to make columns the same height in Webflow?