Search code examples
htmlcssreact-bootstrapnav

Navbar exceeding viewport only in mobile live server

I'm experiencing this strange behaviour in my webpage https://vinoreo.mx .

The navbar is exceeding the viewport in mobile - live server. Localhost works fine.

It happens only in the "/" route, the other routes show correctly the viewport.

Before loading all DOM elements the viewport shows correctly, but once the elements update (react front-end) this is when the problem appears.

The SPA uses this meta tag:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Live mobile view using iPhone 6/7/8 Plus as reference

live-view

Localhost view using same iPhone 6/7/8 Plus as reference

localhost-view

As you can see footer navbar simply disappears and also the whatsapp and cart buttons which are also fixed, and come from the main top navbar.

I have reviewed my style.scss file and I have not messed with navbar class widths.

.navbar {
    padding: 0.5rem 10%;
}

@media (max-width: 991.98px) {
    .navbar {
        padding: 2% 2%;
    }
}
.nav-link {
    padding: 0px;
}

.navbar-text {
    padding-bottom: 0;
}

I'm using React-bootstrap classes which I believe are the regular bootstrap ones.

Solution

  • It took me some days and several attempts on moving css and finally solved it by adding this to meta content tag:

    initial-scale=1,minimum-scale=1