Need help for my horizontal scroll and my logo section

Design help Layout & Design
1

Hello guys,

I have checked a lot of tutorials and solutions on internet but I can not fix my logo section and my horizontal scroll overflow.
I really need help aha

Logo section : all the images are not the same size and does not look very good… I did not succed to create an infinite loop even when I add a embed code…

Horizontal scroll : when the website is published, I can move my window on the horizontal axis. Do you know how to fix this ?

Thanks a lot !!!

Here is my site Read-Only: Webflow - Kiosk Website

Public website : https://kiosk-website.webflow.io/

2

Hi @Camille_Di_Vincenzo1 after checking your project I see that logos loop is running.

set img width to 100%.

I see another issue on large monitor that your second set is cut in half. This is because you have set overflow-x :hidden on @media screen and (min-width:1440px) as it suppose to be max-width: 1440px

Once you will fix this you need to solve issue where on large screens where after second logo set is gap until first logo set is out of viewport. The options to solve it will be:

  1. enlarging logos
  2. made whole loop shorter
  3. add more logos into set
3

Hello Stan,

Thank you for your answer :)

I tried to set the img width to 100% but the images are not having the same alignment, spacing and neither the same size…

For your second point, I do not understand how to proceed to change the min-width/max-width of my overflow.
I have enlarge the logo size on each columns of my grid.

CleanShot 2024-04-21 at 11.31.32
CleanShot 2024-04-21 at 11.31.321920×1080 139 KB

4

Hello @Camille_Di_Vincenzo1, it’s important to recognize that not all logos carry the same visual weight. A rectangular shape will often appear wider than a square.

Issue 1
Perceptual Size of Logos

Fix 1
Prioritize optimizing images before uploading to WF. This involves using any graphic application to optimize all images.

Issue 2
Spacing Discrepancy between Rectangle and Square Logos due to the Grid

Fix 2
Utilize Flex and its functionalities to ensure equal spacing between square and rectangle logos.

Issue 3
Explanation of the Difference between min-width and max-width in @media queries

Short Explanation
min-width: 1440px - Applies changes when the browser window is 1440px or wider.
max-width: 1440px - Applies changes when the browser window is 1440px or narrower.

Feel free to study this example of a scroller for further understanding. ;)

Take your time to digest this information. Familiarizing yourself with at least some basics of CSS will greatly benefit you in website creation.

1 Like