How to make different canvas sizing have the same spacing between pictures?

Hi there!

I am new to webflow and have hard time understanding the concept of the different canvas size and breakpoints.

I am trying to set up a page with pictures, that are separated with some spacing. However, when I set a certain spacing on desktop mode (1005 px) and then preview it at 1253 px, the spacing between the pictures are gone/getting smaller. I know that I can chance the spacing for all breakpoint, so for 1005 and 1280, but what about the canvas sizes in between?

Hope it makes sense!

[1]: http:// Webflow - Maja's First Project

You should use Grid, it’s perfect for your use case.

Here you’ll learn how to use CSS Grid


Hi Alkoriel! Thanks, that was a brilliant idea. I watched the video, and that helped a lot. However, I am facing some trouble. I would like some of the pictures to have different height and wides (see screenshot with the dogs). The video explains how to make a picture stretched over 2 columns for instance, or 2 rows, but not how to make a picture stretch over 1 1/2 row for instance. Do you think that is possible?

I tried to fix it by making on of the pictures span over 2 rows, but that is not the right solution to it I think…

1 Like

Hi! I think I managed to solve it actually!. Thanks for helping with the grid-idea :slight_smile:

1 Like

Happy you figured it out, it’s the best way to learn!!

Good job!!! :slight_smile:

Thanks for your encouragement! Any chance that you know, why the site is ‚Äújumping‚ÄĚ when I scroll?

I don’t see a jump. Maybe screen record?

Okay, here is a screen recording:

macOS - Screen - 17.4.2022 21.21 - it seems to be a lot worse when I scrolle very slowly…

That’s weird but it could be a designer issue/bug.
Or maybe a mouse and trackpad, messing one another?

Does it happen on the published page too?

Yearh it seem to be the case. I checked on my sister computer and it is fine there. I will try an extern mouse. Thanks again!

1 Like