Adjusting Chart for Responsive Design with Scroll Bar

·Nov 11, 2025 12:49 AM·

How can I make it that this chart won't get cut off on a smaller screen and a horizontal scroll bar will show up? Read-only link Thank you

11 comments

· Sorted by Oldest

Catherine H.
·
·
Didn’t look at your code but should be able to set the div container the chart sits in to overflow to get the scrollbars
Al-ibiewi
·
·
Set overflow of the container to display/show/default I use elementor, so I can't tell the exact name in webflow but the same idea. Sara M.
Al-ibiewi
·
·
But a better way to do this rather than horizontal scroll is to use a tab element
Catherine H.
·
·
overflow: auto or overflow: scroll shows scrollbars (depending on content size and browser). overflow: visible (the default) does not create scrollbars — it lets content spill out. overflow: hidden hides overflow entirely.
🔥1
Matt J.
·
·
Sara M. so you'll likely need a new div to wrap your services_pricing_content div. You'll want to make these style changes on iPad down. Let's call this services_pricing_wrapper - this new div will need to have width: 100%; and overflow: auto; Then for services_pricing_content - you'll want that to have width: 100% and min-width: 1200px;. Then everything should look how it should.
Sara M.
·
·
Thank you very much Matt J.. Is there a way to get the scroll bar on the top? It's a long chart so browsers may not see the full chart with the scroll bar when they are viewing it
Matt J.
·
·
nope - never seen a default scrollbar on the top before. You'd have to explore a custom scroll bar mechanism entirely to do that - if its possible.
Sara M.
·
·
I hear. Thanks. I'm also not liking how it gets cut off on the side with some padding there, but I guess there's probably no way around that.
Sara M.
·
·
now the issue is that the scroll bar on Safari only shows up when you're actually scrolling.
Sara M.
·
·
any ideas?
Catherine H.
·
·
Sara M. overflow: scroll;: This property will display both horizontal and vertical scrollbars, regardless of whether the content exceeds the element's dimensions. overflow-y: scroll;: This property will display only the vertical scrollbar, even if the content doesn't require it. overflow-x: scroll;: This property will display only the horizontal scrollbar, even if the content doesn't require it.

Adjusting Chart for Responsive Design with Scroll Bar | Relume Community

Catherine H.
·
·
Didn’t look at your code but should be able to set the div container the chart sits in to overflow to get the scrollbars
Al-ibiewi
·
·
Set overflow of the container to display/show/default I use elementor, so I can't tell the exact name in webflow but the same idea. Sara M.
Al-ibiewi
·
·
But a better way to do this rather than horizontal scroll is to use a tab element
Catherine H.
·
·
overflow: auto or overflow: scroll shows scrollbars (depending on content size and browser). overflow: visible (the default) does not create scrollbars — it lets content spill out. overflow: hidden hides overflow entirely.
🔥1
Matt J.
·
·
Sara M. so you'll likely need a new div to wrap your services_pricing_content div. You'll want to make these style changes on iPad down. Let's call this services_pricing_wrapper - this new div will need to have width: 100%; and overflow: auto; Then for services_pricing_content - you'll want that to have width: 100% and min-width: 1200px;. Then everything should look how it should.
Sara M.
·
·
Thank you very much Matt J.. Is there a way to get the scroll bar on the top? It's a long chart so browsers may not see the full chart with the scroll bar when they are viewing it
Matt J.
·
·
nope - never seen a default scrollbar on the top before. You'd have to explore a custom scroll bar mechanism entirely to do that - if its possible.
Sara M.
·
·
I hear. Thanks. I'm also not liking how it gets cut off on the side with some padding there, but I guess there's probably no way around that.
Sara M.
·
·
now the issue is that the scroll bar on Safari only shows up when you're actually scrolling.
Sara M.
·
·
any ideas?
Catherine H.
·
·
Sara M. overflow: scroll;: This property will display both horizontal and vertical scrollbars, regardless of whether the content exceeds the element's dimensions. overflow-y: scroll;: This property will display only the vertical scrollbar, even if the content doesn't require it. overflow-x: scroll;: This property will display only the horizontal scrollbar, even if the content doesn't require it.