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
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.
The easy one :
The weird css bug but ultraresponsive one :
Height 0px on
List item, width 80%, Top Padding 80%
Absolute top left corner on
image3, 50% height.
50% top, 50% left
-50% X and Y on transform
And there you have it
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 !
You’re welcome @MoinardColin
Yes i use it all the time (transform)
Doing this center an element perfectly.
It’s a pretty usefull tip ! I’ll remember it
Thanks a lot for the help everytime !
This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.