Hello, I want to have four images in a 2x2 layout without any margin. I used the row widget. It all looks fine but after a couple of seconds the images of the first row resize and margins appear. What am I missing? Thanks for your help.
Live: http://activesol.de/baby-sonnenbrillen.html
Here is my site Read-Only: LINK
(how to share your site Read-Only link)
Hi @Christof, thanks for the good question. I would probably use divs and flexbox styling for this instead of rows and columns.
Can you help to share the site read-only link and we can help to take a look further? See here: Share a read-only link | Webflow University
Thanks in advance
Hi @cyberdave , thanks for your quick reply. I already tried to use flexbox or just divs with 50% width. All the same result.
Here is the link:
https://preview.webflow.com/preview/activesol?preview=d704e3f1bd7253f4e5737daa8dae9ba0
→ Baby Sonnenbrillenm → bottom (2 versions)
At first I thought there is something wrong with the images but it is always the first row - the image does not make a difference.
Regards
Christof
Hi @Christof, thanks, quick comment, I can see there is a Move Up 15px transform on the images, this seems to be causing some vertical white space.
Since I was not really sure what you were trying to achieve with the simple hover movement to move those images up 15px (which causes vertical whitespace), I chose to create an example using a scaling effect that does not involve any whitespace getting created.
I made a quick video:
https://cl.ly/433p0q1c362x/Screen%20Recording%202018-07-27%20at%2008.20%20PM.mov
You can play around with the transforms in the interactions to see what looks good to you, the main thing is to set the Link Blocks to overflow hidden.
Hopefully this helps to give you some ideas.
Wow, thanks a lot for the great support! I did not expect that. A very good explanation and step-by-step instruction.
Actually the scale effect is what I wanted to do right from the beginning but I did not try the “hide overflow” option…
However, there is still a similar problem - there is some padding between some of the images. Is there anything else I am missing?
Thanks for your help!
Christof
