Streaming live at 10am (PST)

Help with grid, height matching and mobile layout

Hey there, enjoying Webflow so far, but have a layout question…

I’m wanting to improve the layout on our homepage - currently I’ve got 3 panels side by side…

But then on mobiles they squash down really small side-by-side…

Image 047

Desired outcome is -

  • 3 columns on desktop/tablet

  • height matched across each column (on desktop/tablet)

  • switch to full-width panels shown one after the other on mobile or small tablet

Currently, I’ve implemented this with -

  • Container > Grid

  • Div inside each grid area to get the background colour

  • Sizing default on the grid

I was looking at the auto-fit option, but that didn’t seem to make them stack and I lost the background colour…I was a bit confused on the auto-fit, as you seem to have to change the default sizing, so I tried %, but then everything pretty much disappeared!

Image 049

So…

  • should the Grid be able to meet my desired outcomes for the layout?

  • if so, I must be missing a setting somewhere to make it work!

  • if not, are there other layout elements I could try for this?!

Thanks very much in advance,

Neil


Here is my site Read-Only: https://preview.webflow.com/preview/attractions-agency?utm_medium=preview_link&utm_source=designer&utm_content=attractions-agency&preview=48b0c03d9f60f918e0baabc102ee02d8&mode=preview

When using grids you have to design the grid layout for each breakpoint.
If you use 3 on a row for a normal page you have to change the grid to be 1 per row