How to structure 5 photo's next to eachother

Hi all,

I would like to structure 5 photo’s next to eachother as i did on my old website. Like this:

I have actually no clue how to fix this in Webflow? Can anyone help me (i’m pretty new to Webflow, so a little newbie explanation would be great :smiley: )

Thanks,

Niels


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

Hey @NielsPolak, welcome to the community!

Can you share your read-only link so we can help? Let me know, and I’m sure I can get you a solution :slight_smile:

how to share your site Read-Only link

Hi thanks for your respond,

Yeah sure: https://preview.webflow.com/preview/angsthelden?utm_medium=preview_link&utm_source=dashboard&utm_content=angsthelden&preview=c6494ed7cce7d45942c3ba3a83260c83&mode=preview

But the image i’ve sent is from the layout of my old website (the one we’re using now). But i would love to make such an layout aswell on our new webflow one :smiley:

Can you help me?

Let me know if this solves your problem, good luck!

https://www.loom.com/share/2312b2fa8ca04fc0ab3e22d6b657a583

1 Like

Wow! Thank you so much for this explanation, amazing response :smiley: thanks you!!

Of course, I’m glad I could help. If this solved your problem, please mark my above response as the solution, so other community members know the issue has been solved. If you need help on anything else, feel free to tag me in your forum posts going forward. Thanks!

Hey, since i’ve faced a new problem i’m reaching out again :slight_smile: i figured out how to put in my photo’s just like you did on video. But somehow the images in my designer are vertical oriented (if that makes any sense) and when i click on toggle preview they appear horizontal oriented. Like stretched out horizontal. Do you know how i can fix this problem?

Thanks :wink:

I’m not sure I understand what you mean haha, can you explain in more detail?

Haha yeah sure, well if i look into my designer it looks like this:

And what i look into toggle preview mode it looks like this:

But i want it to look the way as it appears in my designer. I see that there is thin grey line between picture 1 and 2 aswell in preview mode.

Do you got a solution for this?

Hey hey,

The images are inside of the following container, which we have set to a heigh of 500px and 20vw, or 20% of the screen width:

image

These images are being used as a background image, so the image is going to do whatever is needs to do in order to cover that div block I mentioned above, making sure it takes up the entire container. That’s because we have the background image set to cover:

So, when you preview your site, the container gets wider because your screen got wider, since we have it set at 20vw, but the height stays the same at 500px. So the container becomes more square. Now the background image has to change how big it is to cover the new, differently shaped container. That’s why the image appears differently than in the designer mode, when your screen is smaller.

There are a few solutions to this, but just to make sure I know what you want - you want the image to stay the exact same ratio as what the image really is, is that correct? If so, I do have a solution for you. Just let me know if this is what you want.

Yeah thats what i mean indeed :slight_smile:

Here’s a screenshare of scaling the actual image instead of the container. However, for these to look uniform, you’ll have to make all of your images the same heigh. Hope it helps!

https://www.loom.com/share/2165ea434a634a139aed9b0d02133ad2