New
New
New
Guide
- How-to
- Fix
- Horizontal scroll
Guide
- How-to
- Fix
- Horizontal scroll
Guide
- How-to
- Fix
- Horizontal scroll
How to Fix Unwanted Horizontal Scrolling on Framer Websites
Wondering why your Framer website is scrolling sideways? Don’t worry, it’s a common issue. In this quick guide, you’ll learn what’s causing it, how to fix it with the right overflow settings and get your Framer site looking clean and polished.
Posted by
Nandi
Table of contents
Why is my Framer website scrolling sideways?
There’s nothing worse than previewing your Framer website, only to realize you can scroll not just up and down, but sideways too.
Why is my Framer website scrolling sideways?
There’s nothing worse than previewing your Framer website, only to realize you can scroll not just up and down, but sideways too.
Why is my Framer website scrolling sideways?
There’s nothing worse than previewing your Framer website, only to realize you can scroll not just up and down, but sideways too.
Unwanted horizontal scroll.
Unwanted horizontal scroll.
Unwanted horizontal scroll.
The first thing to check is your desktop breakpoint’s overflow setting.
In many cases, horizontal scrolling shows up because your desktop breakpoint is set to overflow: visible instead of overflow: hidden.
When it’s set to hidden, the problem disappears, you can only scroll up and down, just like you want.
The first thing to check is your desktop breakpoint’s overflow setting.
In many cases, horizontal scrolling shows up because your desktop breakpoint is set to overflow: visible instead of overflow: hidden.
When it’s set to hidden, the problem disappears, you can only scroll up and down, just like you want.
The first thing to check is your desktop breakpoint’s overflow setting.
In many cases, horizontal scrolling shows up because your desktop breakpoint is set to overflow: visible instead of overflow: hidden.
When it’s set to hidden, the problem disappears, you can only scroll up and down, just like you want.
Setting overflow to 'hidden'.
Setting overflow to 'hidden'.
Setting overflow to 'hidden'.
But hold on!
Sometimes you actually need overflow: visible, especially if you’re using sticky positioning somewhere on the page. Sticky elements require overflow to stay visible to work correctly.
So if you have to leave it on visible, you’ll need a different approach to fix the scrolling.
How to get rid of horizontal scrolling
Here’s the deal:
If your desktop breakpoint must stay on overflow: visible, the real problem is that something on your page is physically overflowing the frame.
In other words: a rogue frame is sticking out where it shouldn’t.
Here’s how to track it down:
Open your layers panel and start clicking through your frames.
Look for the offender, you’ll usually spot a frame that’s spilling past the desktop boundaries (to the left or right).
But hold on!
Sometimes you actually need overflow: visible, especially if you’re using sticky positioning somewhere on the page. Sticky elements require overflow to stay visible to work correctly.
So if you have to leave it on visible, you’ll need a different approach to fix the scrolling.
How to get rid of horizontal scrolling
Here’s the deal:
If your desktop breakpoint must stay on overflow: visible, the real problem is that something on your page is physically overflowing the frame.
In other words: a rogue frame is sticking out where it shouldn’t.
Here’s how to track it down:
Open your layers panel and start clicking through your frames.
Look for the offender, you’ll usually spot a frame that’s spilling past the desktop boundaries (to the left or right).
But hold on!
Sometimes you actually need overflow: visible, especially if you’re using sticky positioning somewhere on the page. Sticky elements require overflow to stay visible to work correctly.
So if you have to leave it on visible, you’ll need a different approach to fix the scrolling.
How to get rid of horizontal scrolling
Here’s the deal:
If your desktop breakpoint must stay on overflow: visible, the real problem is that something on your page is physically overflowing the frame.
In other words: a rogue frame is sticking out where it shouldn’t.
Here’s how to track it down:
Open your layers panel and start clicking through your frames.
Look for the offender, you’ll usually spot a frame that’s spilling past the desktop boundaries (to the left or right).
Locating the overflowing frame.
Locating the overflowing frame.
Locating the overflowing frame.
Fix the frame’s behavior.
Select the overflowing frame and pin it to both the left and right sides so it resizes responsively inside the breakpoint.
Once that frame is under control, the sideways scroll will be gone, and your site will feel smooth and professional again.
Another way to fix it
If you don’t want to make the frame responsive, there’s another easy option:
Keep the overflowing frame at a fixed size.
Then set its parent frame (like the section it’s inside) to overflow: hidden.
Fix the frame’s behavior.
Select the overflowing frame and pin it to both the left and right sides so it resizes responsively inside the breakpoint.
Once that frame is under control, the sideways scroll will be gone, and your site will feel smooth and professional again.
Another way to fix it
If you don’t want to make the frame responsive, there’s another easy option:
Keep the overflowing frame at a fixed size.
Then set its parent frame (like the section it’s inside) to overflow: hidden.
Fix the frame’s behavior.
Select the overflowing frame and pin it to both the left and right sides so it resizes responsively inside the breakpoint.
Once that frame is under control, the sideways scroll will be gone, and your site will feel smooth and professional again.
Another way to fix it
If you don’t want to make the frame responsive, there’s another easy option:
Keep the overflowing frame at a fixed size.
Then set its parent frame (like the section it’s inside) to overflow: hidden.
Setting parent frame overflow as 'hidden'.
Setting parent frame overflow as 'hidden'.
Setting parent frame overflow as 'hidden'.
This clips anything that tries to escape without affecting the child frame’s size or layout.
Either way, no more sneaky horizontal scroll.
Wrapping up
Horizontal scrolling is one of those little things that can make a beautiful site feel broken, but it’s also one of the easiest things to fix once you know where to look.
Next time you spot that annoying side scroll in Framer:
Check your overflow settings.
Hunt down any frames that are overflowing.
Pin them responsively or hide the overflow at the parent level.
And just like that, your website will feel clean, professional, and exactly how you imagined.
This clips anything that tries to escape without affecting the child frame’s size or layout.
Either way, no more sneaky horizontal scroll.
Wrapping up
Horizontal scrolling is one of those little things that can make a beautiful site feel broken, but it’s also one of the easiest things to fix once you know where to look.
Next time you spot that annoying side scroll in Framer:
Check your overflow settings.
Hunt down any frames that are overflowing.
Pin them responsively or hide the overflow at the parent level.
And just like that, your website will feel clean, professional, and exactly how you imagined.
This clips anything that tries to escape without affecting the child frame’s size or layout.
Either way, no more sneaky horizontal scroll.
Wrapping up
Horizontal scrolling is one of those little things that can make a beautiful site feel broken, but it’s also one of the easiest things to fix once you know where to look.
Next time you spot that annoying side scroll in Framer:
Check your overflow settings.
Hunt down any frames that are overflowing.
Pin them responsively or hide the overflow at the parent level.
And just like that, your website will feel clean, professional, and exactly how you imagined.
