Streaming live at 10am (PST)

Height-matched content panels but scaling down to mobiles

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