How to make this responsive on desktop?

Design help General
1

I’m having trouble with these card wrappers since they have fixed width/height so they’re not really responsive when minimizing width of desktop. I already fixed it on tablet/mobile, but still having trouble with this one.

I’d appreciate some help from you guys!

Here is my site Read-Only: https://preview.webflow.com/preview/fonollosa?utm_medium=preview_link&utm_source=designer&utm_content=fonollosa&preview=c8bfad8be1e99b51ad1f7c9dbae5563c&workflow=preview

2

Hi Mislav! Can you provide some more detail on what you’re trying to achieve? When loading your project on desktop, all card wrappers are clearly in view with good spacing in between and scaling the window down just adopts the styling from the smaller breakpoints as necessary, so I just want to make sure I’m understanding what behavior you’re looking for.

Thanks!

3

Hey @Mislav_Repinac,

As @ColemanChrisB mentioned it looks like you have achieved a pretty decent look by using flex and altering card pixels widths for the different viewport widths.

Another approach is to use Grid. Grid is natively responsive and you can set minimum and maximum width/height for your elements, altering columns/rows for different layouts for viewports.

I have created a short video showing what I created having a little ‘play’.

Here’s the link:

Cheers
Keiran

1 Like