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

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
0

#1

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:


#2

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.


#3

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


#4

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


#5

@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.


#6

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


#7

@sujith3021, thanks buddy! Will try this too!


#8

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


#9

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


#10

@Sujith3021

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


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

Add this @650px to #container1


#12

: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…?


#13

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


#14

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.


#15

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