Hello, I’m having an issue getting my site to respond when using the console controls.
I’ve tried adding:
<meta name="viewport" content="width=device-width, initial-scale=1">, which allows for some responsiveness in the console, but it makes my containers only fit half of the page, even though everything is set to width:100% (html, body, accompanying divs). When I don’t have that tag in there, it does not respond to my media queries (the main is switching from the desktop to mobile navbar). I haven’t run into this problem before and I was wondering if anyone had any idea of what the problem may be.
I’ll post the code pen even though it’s lacking pictures. The weird part is that it actually responds correctly inside of there ( it switches to the mobile nav and fills the entire screen as it should). Whereas on my browser console, it does not.
I know this is convoluted and it’s taught me the value of mobile-first web-dev. I’d start over, but I really like my desktop view and it took me a while to get it to this point.
Any pointers in the right direction would be huge!
This is the mobile view I am getting, currently. This is with the <meta name=“viewport” content="width=device-width, initial-scale=1 it’s:
Without the <meta name=“viewport” content="width=device-width, initial-scale=1
The nav-bar doesn’t change and it’s still not fitting properly: