How to Craft Responsive Columns In Webflow Using Divs

Imac computer monitor featuring 4 photos of rocks and minerals

In the realm of web design, creating responsive columns is a common yet crucial task. While Webflow offers a grid feature, it comes with certain constraints. Moreover, the Columns feature in Webflow is being sunset, and wasn't very handy to begin with. This brings us to an alternative approach that not only simplifies the process but also enhances the responsiveness of your columns—using divs. In this tutorial, we'll delve into creating responsive columns using divs, focusing on a scenario where text is placed on one side and an image on the other, with a fair amount of padding in between.

The Divs Approach to Responsive Columns

The divs approach is a quick, easy workaround to create responsive columns. It utilizes a minimal amount of classes and styles, making it a streamlined method especially for those who prefer a less cluttered workspace.

Step-by-Step Guide to Creating Responsive Columns

1. Setting Up the Parent Div

Start by adding a parent div to your container. Apply the following settings:

  • • Style selector: Columns
  • • Display: Flex layout
  • • Direction: Horizontal
  • • Alignment: Top
  • • Justify: Left

2. Creating the Text Column

Add a new div inside the parent div. Apply the following settings:

  • • Style selector: Text Column
  • • Width: 50% on desktop, 100% on tablet for responsiveness

3. Creating the Image Column

Add another div block into the parent div. Apply the following settings:

  • • Style selector: Image Column
  • • Width settings: Same as the previous div.
  • • Padding: 40px to the bottom

4. Populating the Text Column

Add an H2 and paragraph text to the text column.

5. Populating the Image Column

Add an image to the image column.

Additional Tweaks for Enhanced Aesthetics

  • • If the text is not nearly as tall as the image, adjust the text div alignment to the center so their midpoints align, making the layout look much sharper.
  • • Utilize the Reverse Direction option to flip the order of the column when transitioning from desktop to mobile or vice versa.

Summary

The process outlined above is a straightforward way to create basic, responsive columns by only using divs and a very small amount of styling and classes. This approach is not only efficient but also effective in maintaining a clean, organized workspace in Webflow. As you venture into your next project, consider utilizing divs to ensure your columns are not only responsive but also aesthetically pleasing and user-friendly.

Ready to Elevate Your Webflow Project?

Have you found this tutorial helpful for your next project? If you have any questions or need further clarification on any of the steps, feel free to reach out. We're here to assist you in mastering Webflow to create stunning, responsive designs!

More Articles

Reach Out

Work with a passionate studio that truly cares about your success. Take the first step now and contact us to discuss your next web development or design project. Submit a message via the form below, give us a call, or stop by the studio...we love visitors. We can't wait to hear from you and bring your business aspirations to life!

Thank you! Your submission has been received! A member of the Narrow Land team will be in touch soon.
Something went wrong while submitting the form. Please try again.

508-203-1023
396 Main Street
Suite 8
Hyannis, MA 02601