Responsiveness Isn't Working in Console Controls (And in general)

1

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:

image
image1920×1080 249 KB

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:

image
image1920×1080 271 KB

2

I’m afraid there are too many stuff done wrong here. You should not be using absolute position on key layout boxes like header. Just think what you’re trying to do here, you’re taking elements out of flow and then hacking the position in order for them to look like they are in flow… this is super strange and buggy as you can see.

Instead make sure you 100% learn flexbox model:



And then make layout only with flexbox, no absolute positioning. Hint, if you need to squash some boxes together, like “Eric Lui” and “photography” in the header you can use relative positioning, this way they will stay in the flow and you will be able to control how close are they to each other.

Good luck and do not try to reinvent a wheel at this stage :slight_smile:

1 Like
3

Thank you. I’ll go back to the drawing board with this one. I was definitely disregarding basics.

4

Should the entire html document be one flexbox or grid then? Rather than piecing it all together as I was trying to.

And should I avoid absolute positioning in most scenarios? Don’t even remember why I used it as a container - was pretty stupid in hindsight. Am I still able to use it to fine-tune an item inside of a container, or is that bad practice?