Overflow - horizontal Scroll

Design help General
1

Hey Guys,

I’m unsure how to get my “more images” section in the product page (in tablet and phone) to stop showing and create a horizontal scroll.

but currently all the other elements adapt to the div “more-images-wrapper”.

When I have a fixed PX width, it doesn’t what i want but I want it to adapt and resize automatically

(Webflow - Preset Site)

2

I figured it out, it’s all good. I changed the paren’t wrapper to relative, and the collection container to absolute, gave the parent element a fixed height, and set overflow to scroll. It works exactly how I want

3

Hi there,

To achieve a horizontal scroll for your “more images” section on tablets and phones, you’ll need to make a few adjustments:

  1. Flexbox Approach: Set the display property of your more-images-wrapper div to flex and use overflow-x: auto;. This allows the images to stay in a horizontal line and scroll within the wrapper.

    .more-images-wrapper {
    display: flex;
    overflow-x: auto;
    width: 100%; /* or set to the parent container's width */
}

.more-images-wrapper img {
    flex-shrink: 0;
    width: auto; /* or a percentage to allow resizing */
    max-width: 100%; /* ensure it doesn't exceed container width */
}

  2. Responsive Sizing: Avoid setting a fixed px width for the images. Instead, use percentages or set width: auto; and ensure max-width or flex-shrink is correctly applied to prevent images from stretching or overflowing.

  3. Media Queries: You can fine-tune the behavior on different devices using media queries, ensuring that the layout adapts smoothly across different screen sizes.

This setup should make your images adapt and resize automatically while enabling horizontal scrolling.