Responsive Layout (spacings)

Hello guys,
I found this awesome Design:

My question is: How can i make this Design responsive so it scales on bigger screens without the cards moving further from the text?

using rem as size unit for everything?
How can i make the spacing responsive?

Thanks in advance.


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

It depends on how you implement this design. Can we see your read-only?

I want this page to be a static 100vh page.

10 Minutes :slight_smile:

I made a fast mockup based on my knowledge How I could solve the problem.

https://preview.webflow.com/preview/agentur201720-v2?utm_medium=preview_link&utm_source=designer&utm_content=agentur201720-v2&preview=09a3d32c21fe84e5ad9184b42596ca83&pageId=5da251fb20ae1b64b5326e1a&mode=preview

But with my solution the cards only look pretty in the designer. When I use px instead of % They look good in the preview aswell but dont scale on bigger or smaller screens.

I don’t often recommend it but this is the perfect case where you may want to use grid.

But how can I use Grid for Layouts that are shifted?
I thought I can only Use Grid if te layout is even.

I am not sure what you mean by even or shifted but I can assure you it is possible to use grid for layout like this. Give it a try (after watching tutorials!)

Got it :smiley:

https://preview.webflow.com/preview/agentur201720-v2?utm_medium=preview_link&utm_source=designer&utm_content=agentur201720-v2&preview=09a3d32c21fe84e5ad9184b42596ca83&pageId=5da251fb20ae1b64b5326e1a&mode=preview

Thank you very much for your help!

1 Like