![]() A common solution for this it to add outlines to all elements by adding the following style to your CSS: So when you make all of them visible, it becomes easier to find the one causing an overflow. They're there and take up space, but unless they have a background or border you won't see where they are. Adding outlines to all elementsīy default, elements are "invisible". This is obviously very time consuming, so it helps to make all elements visible. When that happens, press ctrl/cmd Z to undo the delete, and drill down into the element to figure out which of the child elements cause the horizontal scrollbar. To find out which elements cause a horizontal scrollbar, you can use the devtools to delete elements one by one until the scrollbar disappears. Now that we know some of the reasons overflow happens, lets look at how to find them. Because it wasn't contained in an element with overflow: hidden, all of it was visible after you scrolled. The curve on that site extended past the viewport. Like a menu that slides in the from the right or a wider-than-the-viewport-element with rounded corners to get a certain curve in your design like in this video: Some design elements might require you to place them outside of the viewport. Not clipping off-screen elements or elements that are wider than the viewport This happens more when you develop the desktop version first, so Mobile first design is a good prevention. Particularly when images are added through a CMS. That might sound overly simple, but it's often the cause of overflow issues. When you hardcode that in your CSS, it's going to cause a scrollbar on mobile screens that are only 375 pixels wide. Fixed width elementsĪn image or element might have a width of 500px in your desktop layout. If you can't do that, or you're setting the width on another element, add overflow-x: hidden or overflow: hidden to the surrounding element to prevent the scrollbar. Percentages don't include the width of the scrollbar, so will automatically fit. The easy fix is to use width: 100% instead. In short: if you use width: 100vw on a page that has a vertical scrollbar you end up with a horizontal overflow. ![]() ![]() So the end result is that your page is slightly wider than the available width (which is the full width of the viewport without the scrollbars). When you use 100vw however, you make something the full width of the viewport and this includes the width of scrollbars. The viewport width unit ( vw) is a useful way to make things a certain percentage of the screen wide. There area few common causes for horizontal scrollbars and overflows: Setting the width of the body to 100vw On top of that it's hard to determine which element is causing the overflow. They're easy to overlook while developing (especially on macs) and if users scrolls horizontally, your layout will look broken to them. One of the most time consuming issues when it comes to web development is debugging horizontal scrollbars.
0 Comments
Leave a Reply. |
Details
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |