Webflow sync, pageviews & more.
NEW

How can I create a responsive grid layout in Webflow with an image and text, which stacks in a 2 x 1 layout on mobile?

TL;DR
  • Create a two-column grid with an image and text for desktop, then switch to a single-column (2 rows) layout on mobile by editing the grid or using Flexbox.
  • Adjust padding, width, and scaling per breakpoint to ensure proper spacing and responsiveness across all devices.

To create a responsive grid layout in Webflow where the image and text stack vertically (2 x 1) on mobile, follow these steps:

1. Create a Grid Layout

  • Drag a Section from the Add panel onto the page.
  • Inside the section, add a Div Block and name it something like “Responsive Grid.”
  • With the Div Block selected, go to the Style panel and set the Display property to Grid.
  • Click the Edit Grid button and create 1 row and 2 columns.

2. Add Image and Text to the Grid

  • In the first column of the grid, add an Image element.
  • In the second column, add a Text Block or Heading and any other text elements you'd like.
  • This gives you a two-column layout on desktop and tablet views.

3. Adjust Grid for Mobile Layout

  • Switch to the Mobile Landscape and Mobile Portrait breakpoints using the top toolbar.
  • With the “Responsive Grid” selected, click Edit Grid, then:
  • Change the grid layout to just 2 rows, 1 column.
  • Move the Image to Row 1, Column 1 and Text to Row 2, Column 1.

Alternatively, instead of editing the grid, you can:

  • With the grid selected on mobile view, set Display: Flex (vertical direction) instead of Grid for more control, if needed.

4. Ensure Proper Spacing

  • Add margin or padding between the image and text to improve spacing on mobile.
  • Make sure both the image and text are set to 100% width or auto to adapt well on smaller screens.

5. Make It Fully Responsive

  • Test across all breakpoints: Desktop, Tablet, Mobile Landscape, and Mobile Portrait.
  • Adjust font sizes, spacing, and image scaling as needed per breakpoint in the Style panel.

Summary

Set up a two-column grid on larger screens and switch to a single-column (2x1) layout on mobile by editing the grid structure per breakpoint. Use the Grid or Flexbox layout tools and ensure responsive design best practices for clean stacking.

Webflow Resources
Webflow templates
Webflow inspiration
Rate this answer

Other Webflow Questions

Explore Logic tutorials
How can I create a row with 5 columns using Webflow?
How can I add horizontal and vertical borders to the cells in my 6-column by 3-row table in Webflow using Grid?
How can I fix the issue with the navbar losing its position on mobile devices running Android Chrome in Webflow?
How can I retrieve a Live Item ID and update the corresponding row in Google Sheets using Zapier integration with Webflow?
What is causing the error message "Recipient has too many recent signup requests" when posting on Webflow?
How can I create a hover effect in Webflow similar to the one shown in this image? Are there any tutorials available for this? I couldn't find any. Any tips would be greatly appreciated.
How can I link my logo to the homepage on Webflow?
How can I resolve the issue of a dropdown in a Webflow collection list opening under the CMS item below it, even after adjusting z-index and position?
How can I apply a background color to the entire grid section in Webflow when using divs within each grid cell to create a table?
Why does Webflow not allow buttons to be clicked and prevent navigation to other pages upon first loading the site?
What are the powerful features of using Webflow CMS for creating a tutorial website?
How can I stop a Webflow Vimeo video from playing with a button other than the play button, close the video window when the close window button is pressed, and autoplay the video when the window opens?
How can I vertically center a container inside a section in Webflow? Thanks.
Can I create vertical tabs in Webflow?
Is it possible to create a comprehensive admin panel in Webflow that includes user management, designer and influencer onboarding, product and listing management, order management, analytics and reporting, financial management, content management system, platform settings and customization, and security and privacy features?
Can Webflow be used to call a CSS or JS file stored on a different server, instead of hosting them on GitHub?
How can I dynamically redirect to a CMS created after form submission in Webflow?
In Webflow, how can I hide specific elements in the footer (such as "Ramin Khaze The Difference" and "Schedule showing") when the URL contains a certain parameter, such as "?mls"? I am a beginner in coding and would appreciate any help. Thank you!
How can I prevent the "w-current" class in Webflow from overriding the height of my custom class on a link block element?
Can anyone help me add a digital clock and date to my Webflow site? I've been able to add custom code, but I need assistance with styling the text. Thank you in advance for your help!
Can I capture a screenshot of a Webflow page on click and convert it to a downloadable PDF?
How do I mirror user input from a form field to a non-form text field on the same Webflow page in real-time using JavaScript?
How can I close a dropdown in Webflow when clicking on a link?
Is there a more optimal way to create a portfolio section with a sticky image container that changes as you scroll, similar to the design on Deveb's website, that works across different web browsers, especially Safari, using Webflow or any other JavaScript tools?
How can I implement a multi-select field with a pre-selected option in a popup form on a collection page using Webflow?
How can I alternate the layout of the image and heading for each collection item in a two-column format on Webflow?
How can I execute JavaScript code when clicking a specific button with a given ID in a Webflow project?
How can I disable the Webflow success or failure state for a sign-up form and display a custom thank you page using jQuery and the Webflow form submit state?
How can I create a vertical scrolling menu with Webflow, similar to the one on Apple's website, that switches to horizontal scrolling when the menu doesn't fit on one screen?
How can I change the language of the Google Maps embed from English to Arabic in Webflow?