Trying to remove spaces between images on projects / Design

Design help General
1

Hello everybody,

I’m realy newbie here, and starts learning about webflow few hours ago.

How i remove the spaces between the images? I tried so hard to remove this, changing the project on the templates (CMS collection Pages) but nothing goes right. The padding and margins around the image are zero.

Someone could help me?

Link to view the problem: http://brunos-fantabulous-project-0d2a62.webflow.io/projects/cystera-launch

2

Hi Bruno,

Welcome to Webflow and to the Webflow Forum.

Can you also share your project’s Read Only link, that way we can also view what settings you have on the elements.

Thanks
Keiran

3

Hi Keiran,

the read-only link follows ahead:
https://preview.webflow.com/preview/brunos-fantabulous-project-0d2a62?utm_source=brunos-fantabulous-project-0d2a62&preview=49109cb8ee427e439cb922c51d1d8e4d

Thanks
Bruno

4

Hi Bruno,

Thanks for the link.

Can you try again, for some reason that link results in a 404 page error??

5

Thats weird, but, follow here again,

https://preview.webflow.com/preview/brunos-fantabulous-project-0d2a62?utm_source=brunos-fantabulous-project-0d2a62&preview=b6480b251b9e4ad8168d9b296e0b63a6

Thanks,

6

Hi Bruno,

Thanks that link worked successfully. :face_with_raised_eyebrow:

I see that you are utilising the CMS for those elements.

Looking at the structure of your ‘Projects’ collection, you are using the Rich Text Block element to display your images. Within the Rich Text Block, each image also has space to input text for a ‘caption’ for the image.

That’s where the extra space between images is coming from.

You may need to change the structure of the collection to use the Image element instead of the Rich Text Block element.

Hope that makes sense.
Here’s an image of the settings:

CMS%20-%20Rich%20Text%20Settings
CMS%20-%20Rich%20Text%20Settings818×620 56.2 KB

And here’s more info about using the CMS from the Webflow University:

Hope that helps,
Regards,
Keiran

1 Like
7

Hey @Bruno_Olivieri :wave:

@knk is right, if you’re just using the Rich Text element for pictures, you could add image fields and style these instead.

However, you may want to add more images than you have fields available so the Rich Text is ideal in this scenario. You can style the images in the Rich Text to have no spacing as follows:

  • Add a new Rich Text Element above your Dynamic Rich Text Element

  • Give it the same class name as your CMS Rich Text Element Project Body Copy

  • Add in one image

  • Select the image you just added

  • Then do this:

    30%20pm
    30%20pm235×528 168 KB

  • You’re adding a negative top margin of -10 which brings all the images in your CMS Rich Text element together without spacing.

NOTE: As you have styled all images by doing this, any time you add an image to your project, the default image without class will inherit this negative margin, until you add a class and style it otherwise.

2 Likes