[Support request] Strange issue with viewport, the view on mobile devices

[Hefin]

There is this strange issue, when trying to view on mobile devices you will notice a slight horizontal scroll on the webpage when on an actual mobile device…could you please suggest how to fix this.

Link to website
esign dot com/rental-lease/

[David]

Hi there,

the Drop Box in the sidebar – there are some buttons, and i see this CSS being applied to them:

@media only screen and (max-width: 600px) {
    .dropdown {
        width: 110%;
        display: block;
        margin-bottom: 20px;
    }
}
@media only screen and (min-width: 600px) {
    .dropdown {
        width: 113%;
        display: block;
        margin-bottom: 20px;
    }
}

I cannot see where that CSS is coming from because the CSS has been optimized and cached.
The problem is the width: 110%; value ons small screens and width: 113%; on larger screens – both are wider then the screen.

Not sure if you have access to the CSS but it needs editing.

If you don’t have access then add this CSS to fix the issue its creating:

.doc-box .dropdown {
    max-width: calc(100vw - 40px);
}
.doc-box .dropdown .dropbtn {
    width: 100%;
}

[Author]

Posts