How to Create Responsive Layouts in Webflow

In this tutorial, we will cover everything from setting line heights to calculating aspect ratios on images in order to create responsive layouts in Webflow. We will walk through the process of building a responsive component using a div to hold text and images and applying specific formulas for setting widths, font sizes, line heights, and image heights. Let's dive in and get started!

Creating the Div to Hold Text and Image

In Webflow, we will start by creating a div that will hold our text and image together. This div will have the class of "Hero layout" and will be set to a 100% width of the available space. We will apply flex and align it to the center, justifying the space apart.

<div class="hero-layout">  <div class="hero-content">    <!-- Text and image content will be placed here -->  </div></div>

Setting the Width of the Content Div

The width of our content div will be set using a percentage to ensure it resizes with the browser. The formula for calculating the width is:

(element width / parent width) * 100%

Using the given example, where the element width is 505 pixels and the parent width is 1350 pixels, we can easily calculate the percentage in Webflow.

.element {  width: 37%;}

Calculating Font Size and Line Heights

Font Size Calculation

To set an "em" font size, we will take the pixel size and divide it by 16 (as 16 is the browser's default font size). The formula for calculating the font size in "em" is:

(pixel size / 16)em

For instance, if the heading is 112 pixels, we can calculate the "em" font size in Webflow.

.heading {  font-size: 7em; /* Based on calculation */}

Line Height Calculation

We want to use a unitless line height to avoid readjusting it every time we change the font size. The formula for figuring out the unitless line height is:

(line height / font size)-

Calculating and setting the unitless line height can be easily done in Webflow.

.paragraph {  line-height: 0.93; /* Based on calculation */}

Setting the Image Height

We are going to use the top percentage padding trick to ensure that our image maintains the same aspect ratio across all breakpoints. The formula for setting the height of the image is:

(image height / image width) * 100%

Using the given example with an image that is 560 pixels tall and 770 pixels wide, we can apply the formula in Webflow.

.hero-visual {  height: 72.73%; /* Based on calculation */}

Making the Image Responsive

To make the image responsive, we will utilize a div as the container for the image and apply specific classes to ensure it maintains its aspect ratio across breakpoints.

<div class="hero-visual">  <div class="image-container">    <img class="global-image" src="image.jpg" alt="Image Alt Text">  </div></div><style>  .global-image {    width: 100%;    height: 100%;    position: absolute;    object-fit: cover;  }</style>

Handling Responsive Behavior

On desktop, we will have a fully responsive component. However, on mobile, we will need to make some adjustments. We will switch the flex direction of our layout, make the hero content and hero visual divs 100% width, and the image will automatically maintain the same aspect ratio across all breakpoints.

By following these formulas and applying them within the Webflow platform, you can create responsive layouts for your web projects. I hope you found this tutorial helpful and informative. Happy designing!