Squared list images and responsive issues

[MoinardColin]

Hello,

I’m currently working on my new portfolio and I have a some issues with the responsive aspect.
In order to present my projects, I made a container with a width of 980 and in it I put a list with images of 450x450 and 20 margin. On big screen the spacing looks good. But as soon as I go on lower screen it is messed up. Now I understand why it does that, but I don’t know how to fix it. I’m guessing I’m probably gonna have to play with % to make the squares or something like that but I’m not sure. The square doesn’t need to be exactly 450, but they need to be squares.

If anyone can help me that would be nice

Here is a link to the current portfolio : https://preview.webflow.com/preview/portfolio-2ff483?preview=750916944d02f1220c8ecd02fb40cdf6

[zbrah (Mazette.co)]

Hey @MoinardColin,

For your container i highly recommend you to use the Webflow container.

And go down to 430X430 for your squares

Do this for tablet

For the mobile.

Two solution.

The easy one :

Do this

The weird css bug but ultraresponsive one :

Height 0px on List item, width 80%, Top Padding 80%

Relative on list item

Absolute top left corner on image3, 50% height.

50% top, 50% left

-50% X and Y on transform

And there you have it

[MoinardColin]

Oh wow thanks !
It works perfectly !
I did the weird CSS one and it’s amazing ! I wouldn’t have found this one by myself
I am not so amazing with coding and stuff so I didn’t tought I could use transform to do such thing !
I’ll probably reuse that.
Thanks a lot for the help !

[zbrah (Mazette.co)]

You’re welcome @MoinardColin

Yes i use it all the time (transform)

Doing this center an element perfectly.

[MoinardColin]

It’s a pretty usefull tip ! I’ll remember it
Thanks a lot for the help everytime !