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)
Part 2 (Mobile simulator on)
Thankyou in advance, excessively for any help!!!
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!
@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.
@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
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!