I've encountered a strange issue with my website at .
The navbar is extending beyond the viewport on mobile when using the live server. However, everything works fine on localhost.
This problem only occurs on the "/" route; other routes display correctly within the viewport.
Initially, before all DOM elements load, the viewport displays properly. The issue arises once the elements update (using React front-end).
The SPA utilizes this meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
View on mobile devices (iPhone 6/7/8 Plus) for comparison:
https://i.sstatic.net/vcXtN.png
Localhost view on iPhone 6/7/8 Plus:
https://i.sstatic.net/5SoGs.png
In the screenshots, you can see that the footer navbar disappears, along with the fixed whatsapp and cart buttons which are part of the main top navbar.
I have checked my style.scss file and have not made any changes to the 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 am using React-bootstrap classes, which I believe are the standard Bootstrap classes.