Container Going into Navbar in CodePen Editor and in Google Chrome Mobile Simulator Inspector (But Not in non-mobile Status) & Media Queries Not Working in Google Chrome Inspector Mobile Simulator Mode

Hi folks, I am having a super-weird issue. First of all, in my CodePen editor at https://codepen.io/IDCoder/pen/QBRerM?editors=1100, my container element keeps going into my navbar. See screenshot below:


Also, when the Google Chrome inspector tool is in mobile simulation mode, the media-queries do not work! They only work in non-mobile mode! Why would that be?

Back again to the mobile simulation issue, when I run the same code from my CodePen in m Sublime editor, and use Google Chrome Mobile selector, the container element again rides into the navbar. However, when I turn off the mobile simulator, it behaves normal? Why is this?

See demo videos below:
Part 1 (Mobile simulator off)
t1

Part 2 (Mobile simulator on)
t2

Thankyou in advance, excessively for any help!!!:tired_face::tired_face::persevere::persevere::thinking:

Sometime failing responsiveness can point to a missing viewport meta element.

Try adding this into your head
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

Your container is overlaying your navbar because it has position:absolute applied to it. This takes the element out of the html flow and put’s it on top of everything else. You’ve used top/left to position it in the center of the body. Try adding another div around container1 and giving it position:relative and width/height 100%. The container1 element will then be position inside this element rather than the body.

Here is how i did it. To much css on your codepen to bother.

@Gwesolo, and @codename11, hey awesome people, I will be trying out your suggestions tonight! Cheers to you all man!:grin:

@gwesolol, nah, this doesn’t work. I tried it out and realized that I’d already tried that before. It totally doesn’t work at all.

Give your nav a position relative and apply a z-index of 1, now the main container gets below the navbar and you can move it down using margin-top to some 4rem or something.

@650px you can give your container a top value of 5rem and make translate only along x-axis

@sujith3021, thanks buddy! Will try this too!

@sujith3021, I’ll figure some stuff out…and come back to you all…nothing works…

Didn’t that work .? It should work, i just did a demo in your codepen, it works fine

@Sujith3021

@Sujith3021 according to the syntax of translate which is transform: translate()"what value are you using?

top: 5rem;
transform: translateX(-50%);

Add this @650px to #container1

:grin::grinning: Aha! Hmm! This works @Sujith3021!! Now I have never had to use such syntax before when using CSS-grid technology to make my webpage responsive. :thinking: What made you think of a z-index value for my navbar and adding the transform:translate() syntax to my media-query ?:thinking: Also, is it bad practice for me to have my navbar outside of the container element? Or is better, or standard procedure to have the navbar placed within the container element? Just interested…?

Whenever an element has an absolute position, it stands above all the elements, position relative makes the absolute elements to wrap inside it and thus when z-index is used, the below elements will go to top of absolute elements,

Whenever you need some element to go above any element, z-index is a handy property and should have position value except static

1 Like

And for transform: translateX() in media query, it’s not that i set it up in media query, for some reason i found you positioned your container to the center of the screen in desktop version using translate(50%, 50%) which is (x, y), but that won’t be good on smaller screen, therefore i removed the Y-axis centering and gave it a top value @650px or else i would have applied that to the desktop version itself.

1 Like

@Sujith3021, thanks for your explanations! I highly appreciate it!:hugs: