How do I make this grid responsive

Design help General
1

Hey,

I’m relatively new here to Webflow so I need some advice!

I’ve designed myself a website, on the second section I include my three main services, these services are spread throughout a 3-part grid, as you can see on the desktop view my services are displayed horizontally, what is the easiest/quickest way to display these services vertically ( whilst keeping the design the same ) for mobile view (responsiveness).

(UPDATE)
Just wondering before anyone takes the time to answer this question, should I recreate this grid using divs and flexbox? would that be easier than trying to use a grid? it’s a one-dimensional section so maybe that might be my best bet, let me know your thoughts.

14
142560×1520 559 KB
27
272560×1520 472 KB

https://preview.webflow.com/preview/envers-website?utm_medium=preview_link&utm_source=dashboard&utm_content=envers-website&preview=5cb67f8fad79a5eb208a31fdfce808f7&mode=preview

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

You would be better served using flexbox for a simple one dimensional card set up. Certainly no need for a grid with areas defined.

1 Like
3

I made a flexbox setup with 3 divs inside but there are still responsiveness issues, what am I doing wrong here?

06
062560×1440 608 KB
13
132560×1448 377 KB

https://preview.webflow.com/preview/envers-website?utm_medium=preview_link&utm_source=dashboard&utm_content=envers-website&preview=5cb67f8fad79a5eb208a31fdfce808f7&mode=preview

4

Hey,

  1. Set the primary wrapper to “Wrap”
  2. You will need to set the % width on the inner parent Div, and do it for each device.
  3. But you wont need wrap on the ‘div for test’, only on ‘div portfolio’

Here’s a quick video, give me a sec…

https://www.screencast.com/t/HTFbjp0kL

And review these tutorial as a refresher:

1 Like
5

Thanks man, appreciate it!

6

Not a problem, take care see ya!

1 Like
7

Hey @garymichael1313

Tried following your directions above but having some issues…

Mind taking a look at mine? Check our work DIV, want it to be 2 x 2 on tablet view

https://preview.webflow.com/preview/lets-build-charleston?utm_medium=preview_link&utm_source=designer&utm_content=lets-build-charleston&preview=775d84a6a8fe34ecc08e354ad8c8b75b&mode=preview

8

Hi there, I just saw you sent a note to me. Was that old or did you need help with something??