[Resolved] large space to the right and the mobile menu

[Leanne]

Please take a look at the website on a mobile phone.
There is a large space to the right and the mobile menu extends to the right on a mobile.

Can you help me fix this?

[Ying]

Hi Leanne,

Can you clear cache and disable cache plugin so I can have a closer look at the codes?

[Leanne]

This is done. Please take a look now.

(Also can you delete my email on this post title)

[Ying]

You have this CSS:
https://www.screencast.com/t/RotovsJUIY6Z

form.search-form.navigation-search {
    max-width: 400px;
    top: 40px;
    z-index: 10;
    border: 1px solid #DDD;
    border-top: 0;
    left: 50%;
}

Remove the left: 50%; or if it’s needed for desktop then add this CSS for mobile:

@media (max-width: 768px) {
form.search-form.navigation-search {
    left: 0;
}
}

[Leanne]

Adding

@media (max-width: 768px) {
form.search-form.navigation-search {
left: 0;
}
}

Did not fix it. So, I just removed the whole thing and that solved the problem.

Thank you.

[Ying]

The mobile CSS might be overridden by other CSS.

But glad it worked by removing the CSS 🙂

[Author]

Posts