![]() Make the viewport narrower than is reasonable so it’s more obvious. If you have a really long page and can’t really figure out what the offending element is, try scrolling all the way to the right and scroll from the top to bottom and see if you can find any bits sticking out. Well, since you already have those Devtools open, that’s already starting on the solution, eh? A common cause is having items in your layout that are fixed width or have some min-width value that ends up larger than your viewport width at that point in time. Also, according to iOS resolution, even the iPhone 13 has a logical width of 390px, so dock those Devtools, I say. Or you could, I don’t know, ACTUALLY test on a narrow mobile device?įor what it’s worth, my phone is a Realme 3 Pro which is still happily chugging along, and it has a viewport width of 360px. So the tip here is, dock your Devtools for testing narrow viewports. If you dock your Devtools to the left or right of your viewport, then you can shrink the viewport down to near 0px if you really wanted to. That is, if you have your Devtools in a separate window. The last I checked, Firefox stops at 435px, Chrome stops at 500px and Safari stops at 559px. But did you test it at all?īut first, let’s go with the broad strokes situation of simply not testing at a narrow enough viewport. This is because there will inevitably be some edge cases where a trade-off needs to be made on whether to just let things be. Anyway, we thought it was worth a discussion, from why this phenomenon exists to how we can do our best to avoid it.Īs you can see, I have chosen the reasonably “loose” phrase “do our best”. Which is very different from intentional horizontal scrolling on mobile. Thus, if you deliberately set some overflow on the top and bottom of the section, these will become hidden too.My good friend, Wei, has a pet peeve: unintended horizontal over-scrolling on mobile. ![]() Keep in mind here that this removes the overflow on all sides of the section. Step 4 – Click on “Update” to save changes. Step 3 – Under the “Layout” tab, scroll down to the “Overflow” dropdown and select the “Hidden” option Step 2 – Click on the “Edit Section” option to start editing the section with the overflow Step 1 – Navigate to the page that has the overflow issue and click on “Edit with Elementor” If this is happening on more than one page, you’ll have to repeat this on other pages. If you have more than one section which creates overflow, you’ll have to do this for each of those sections. You can use the Elementor section settings to set the overflow to hidden. ![]() Method 1: Fix Overflow Issue With Elementor Settings You can do this by using the Elementor Section settings or by adding CSS code. ![]() The horizontal scrollbar issue on mobile devices can be fixed by setting overflow to hidden. To also show this piece of content to website visitors, your browser will need to add a horizontal scrollbar. When either the widget content is too big or positioned to exceed the screen width on mobile devices, this creates a horizontal scroll issue. This part of the content that is found outside of its column area is called overflow. What’s overflow? With some Elementor custom design settings, you can “push” the widget content out of its column area. This issue happens when there are one or more elements on the page that create an overflow. If this is the issue you are experiencing, this document will show you how to fix the horizontal scrollbar issue on mobile devices.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |