How to create a collage of images that are all different sizes, that stretch across the full width of the screen

Design help General
1

Hi everyone!

I am having some trouble figuring out how to create something. Please see the screenshot attached. I want to show a series/collage of images in this exact format that stretches across the full width of my screen. I have tried using columns but I can’t seem to get it to be the right size. Does anyone know a way to do this?

Any help at all would be greatly appreciated!

Cheers,
Irish

Here is my public share link: LINK
(how to access public share link)

2

Hey @irishdesigner that’s a neat design! To build that out, my recommendation will be to use several div blocks, all set to Float: left and position relative.

So you could maybe have the top row have 3 divs. First div is 40% width, second div is 20% width and third div is 40% width. :smiley: Then use this same kind of logic as you build out the other items on this page. As you scale down to mobile you can adjust your widths accordingly for the other other view ports (on mobile, most likely each div will be 100% width at that time). :smiley:

Please let me know if this helps, if not, I’m happy to help further! :smiley:

3

Thank you @Waldo I will test this out today and get back to you with my feedback.

Cheers :relaxed:
Irish

1 Like
4

@irishdesigner You could also use VW/VH/EM measurements for that. :wink:

5

@Waldo

Hey! So I tried out using the three div’s on the top row at 40%, 20% & 40%. When I place my images into the div blocks they don’t fit like I want them too. Please see the screenshots attached so you can see what I mean. The first image shows the toggle preview and the second shows it without. All divs are set to float left & relative position. Is the issue with the size of the images maybe?

1396×384 90.3 KB

1671×386 100 KB

6

https://preview.webflow.com/preview/vrxstudiostest?preview=8f88b44da3a8c35c31c0ba8fa18f16ac

You will find this on the “About us” page.

Thank you in advance :slight_smile:

7

Hey @irishdesigner instead of using Image elements inside of the divs. Set background images on the divs and give them a height of 50vh and a minimum height as well (maybe 200px or so). :smiley:

​Please let me know if this solves the problem, if not, I’m happy to help further :slight_smile:

1 Like
8

Success!!

Thank you @Waldo :kissing_smiling_eyes: :stuck_out_tongue: :innocent:

1 Like
9

My pleasure to help @irishdesigner please feel free to reach out anytime if you have any questions, I’m here to help. :smiley: Feel free to tag me @Waldo to make sure I don’t miss the post :wink:

10

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