Streaming live at 10am (PST)

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.

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:

Thank you very much for your help!

1 Like