Can anyone do a quick review of the how I'm controlling the images in this site?

Community resources Getting started
1

https://preview.webflow.com/preview/l1racing-landing-page?utm_medium=preview_link&utm_source=designer&utm_content=l1racing-landing-page&preview=c2abdfa9856ef09a5860ac18e17007d4&workflow=preview

I needed two rows of logos on the top row for primary sponsors, which should be larger than the bottom row for secondary sponsors.

I’ve been struggling with wrapping the images in link blocks which I’ve got working and looking ok visually. Still, as a developer, I’m concerned about the amount of image width and height I had to use to get all the logos in all the breakpoints to look reasonable.

It feels wrong and brittle to me, but I’m still learning the box model and webflow so I’d be really grateful if someone could take a look and let me know if there was a more “right” or elegant way to achieve what I’ve done.

Thanks

John

2

The DOM structure looks good to me.
It depends on how many need to be shown on each row. If you have 5 logos total on a row, I would set the link block width to 20%. (5x20=100%).
Then, in your smaller responsive views you can set the link block percentage to say 50%, to show two logos per row.

For even spacing:

  1. I would make “.sponsors_component” flex with vertical centering.
  2. I would set the link block to flex box with vertical and horizontal centering
1 Like