After developing a responsive website and adding media queries to make it mobile-friendly, I encountered an issue. Despite my efforts, the website's width is still larger than the mobile viewport, requiring users to zoom out to view it properly as shown here. I have tried various solutions such as:
- Setting the container's width to 100%
- Making the width relative
- Ensuring the correct meta tag for responsiveness
However, none of these attempts have been successful so far.
This code snippet serves as a reference:
let menuBtn = document.querySelector(".burgerLines");
let menu = document.querySelector(".mobileNavBar");
let navName = document.querySelector(".navName");
let btnOpened = false;
function burgerMenuToggle() {
// JavaScript function content omitted for brevity
}
If anyone could provide guidance on what steps need to be taken to ensure the website's width is relative to the device's viewport, I would greatly appreciate it. Thank you in advance 🙏