I have created a prototype in Figma (desktop and mobile portrait).
I wish to display Benefits of my business through a grid that has: In desktop view:
have Benefits listed in centre vertical column of grid (see Figma image 1.b attached)
have associated images on left and right column
the listed benefits are grouped in two and should total height of adjacent image (responsive through desktop and tablet view)
In mobile view
Grid should transform to single row column with image above and listed Benefit below (see Figma prototype 2.a attached for reference)
Attempted solution
The approach I have tried without ultimate success is having a grid with a row that holds 1 Benefit with associated image spanning 2 rows (see image 1.c). The goal for this setup is to scale in desktop/ tablet then switch to single column in mobile. I would really appreciate advice on a) best height size/ unit to use in grid to achieve my goal or b) alternative approach.
NOTE
Design includes left column to display section name (full height of section) which I want maintained in both desktop and mobile)
Grid areas are perfect for your responsive benefits layout. Here’s how to implement it:
For desktop, create a 3-column grid container and define your grid areas:
Left section: Set area for the section name
Center section: Configure area for benefits content
Right section: Designate area for images
When you need to adjust for mobile, simply reposition these predefined areas in your breakpoints to stack vertically. The beauty of grid areas is that any content updates will automatically reflect across all breakpoints while maintaining your desired layout structure.
You can manage these layouts through the Webflow Designer’s breakpoint panel, where you’ll find options to redefine the grid arrangement for each screen size.
Hopefully this helps! If you still need assistance, please reply here so somebody from the community can help.
If the content is static ( no CMS ), you can manually position each item in the grid, with the images spanning 2 rows each on desktop. Then change those positions on mobile into a 2x or 1x col layout.
However this involves a lot of item positioning.
Another option would be to create 8 components ( 4 images, 4 text ) and then generate two grids- one for desktop, one for mobile.
If you’re using the CMS, I’d go for that two-grid approach for certain so that you can control your layouts more directly.
Thanks so much for the response and sorry for my late reply (I thought I would receive an email notification when a new post was created).
The content is static.
I have attempted to use the 1st method by manually placing images and listed Benefits. The issue, as I noted in original post, was that when the resolution changed in desktop view the images and listed Benefits in central column become misaligned. This can be witnessed by viewing my read-only link - can you advise on best row height measurement to keep these aligned?
On method 2 that you propose - can you elaborate? (would I hide the desktop grid while in mobile view and vice versa?). If this is possible, this maybe the best solution
My original post is wordy - the crux of my post is how to morph from desktop grid (image 1.b) to mobile grid (image 2.a) - which you may well have grasped
