▼
Streaming live at 10am (PST)

Gaps around Images & Spacing

#1

Hello Webflow Crew,

I am doing a small site for a client and for some reason I cant get the gaps under the images in the gallery to go away. I have no margins, or padding yet there appears to be spaces. What am I doing wrong.

What I want is the images to full the screen, edge to edge, sit next to each other with no gaps. I have created divs, and used the dynamic library to pull in background images with a link around them to link to the individual project page. But they are just not behaving. What am I doing wrong?

Thank you so much!

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

#2

Wrong way to build very simple layout (Add your own styles only for special Un-Even Layouts and ideas like this).

First, you can use Webflow CMS Build in Collection list settings (3 cols).

Tutorial

I think the best solution is to follow the steps her (Same layout 2-3 minutes of work):

“THE GAP”:

In your case you set manually the width of each Collection-item - to 300px Width. 3 images in a row (3x300 = 900px) - but the container W is greater > 900

#3

The btn in your case is 100% height/width (Not like the youtube example).

Set the parent to “position: relatve;” than Try this and you get full area btn:
image

Read more on google (The name of this trick/idea is Overlay)

#4

You legend! THANK YOU SO MUCH!

#6

Thanks, annoyingly I still have not got it right. I think I almost have it but there seems to be gaps in the grid for some reason? :frowning:

#7

This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.