Streaming live at 10am (PST)

Disable Horizontal Scrolling inside an element

Hey everyone, Ive been trying to get an embedded shoutout list, and i want to enable scrolling for overflow content. Only thing is. It will put a horizontal scroll bar too, Even if there is nothing overflowing horizontally from the element

Read only link:

https://preview.webflow.com/preview/midnight-gaming?utm_medium=preview_link&utm_source=designer&utm_content=midnight-gaming&preview=dcbe40d256816559759e2dc9def0f91a&pageId=5f35f922a83cd17ac0f3d2a4&mode=preview

I believe doing overflow scroll will always do both. You could use overflow auto which will then only show a scroll bar if needed, so only the one should show. If that doesn’t work, custom css is the way to go.

I do have a site plan to get custom code, But i would have no idea what to put, or where to put it

If the element is just on one page, you can add the code to that page’s custom code section.

From inside the Designer, open a Page’s settings , enter your code in the head code section, and save the settings.

I took a look at your site, and not sure if I got the element you wanted the scroll set on right, but you can change that when you add it to your site. Use the name of the class with dashes instead of spaces. I used your HTML-embed 6 class. Just replace “html-embed-6” with another class if needed.

<style>
.html-embed-6 {
overflow-y: scroll;
overflow-x: hidden;
}
</style>

Hope that helps.

1 Like

@Drew_Schafer It worked like a charm, I cant thank you enough. Ive been seeing the same solution in several threads, putting it inside the element, But putting it in the head code and referencing the class that way worked Thanks again man

Yes, you can do it inside the embed element as well. Often depends on how much custom CSS you will have.

1 Like

Not too savvy in the ways of custom coding, so ive been at the mercy of google and the kindness of the community members :smiley: <3