How can I create a horizontal scroll of client logos on my Webflow site without any background, border, or arrows?

Published on
September 22, 2023

To create a horizontal scroll of client logos on your Webflow site without any background, border, or arrows, you can follow these steps:

  1. Add a container:
  • Drag and drop a div block onto your page to serve as the container for the logos.
  1. Set the container's style:
  • Give the container a class name in the right sidebar panel.
  • Set the container's width to 100% so that it stretches across the entire screen.
  • Set the container's height according to your desired size.
  • Set the container's overflow property to scroll to enable scrolling.
  1. Add a flex container:
  • Inside the container div, add another div block by dragging and dropping a new div element.
  • Give this div block a class name.
  • Set the display property of this div to flex to create a flex container.
  1. Add your client logos:
  • Inside the flex container div, drag and drop image elements to add your client logos.
  • Select each image and set its size and position according to your preference.
  • Adjust the padding or margin around the images if needed.
  1. Style the logos:
  • Apply styles to the images if necessary, such as adjusting the width, height, or opacity.
  • You can add additional effects like hover animations or transitions as desired.
  1. Adjust the scroll behavior:
  • If you want the logos to scroll responsively on all devices, you can set the height and width to be percentages rather than fixed values.
  1. Preview and test:
  • Save your changes and preview your site to see the horizontal scroll of client logos without any background, border, or arrows.
  • Test the scrolling behavior on different devices to ensure it works as expected.

By following these steps, you will be able to create a horizontal scroll of client logos on your Webflow site without any background, border, or arrows.

Additional Questions:

  1. How can I add a background color or border to the container of client logos in Webflow?
  2. Can I add arrows to indicate the horizontal scroll of client logos in Webflow?
  3. How can I make the client logos responsive so that they adjust to different device sizes on Webflow?