Media query not responding

Website does not respond to media query
I am creating portfolio page for myself, the media query i’m using to make mobile friendly is not working.
I’m using this media query: @media screen and (max-width: 400px)
I also tried opening on site on mobile using codepen to check if there is problem with browser but its still not working.

Codepen Link

Browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.77 Safari/537.36

Challenge: Build a Personal Portfolio Webpage

Link to the challenge:

When you say it is not working, what exactly are you expecting to happen when the window width is less than or equal to 400px? Currently, when the condition is met, the height of the element with id=“navigation” changes to 10rem (which is what you specified) and the links’ font size of the same element change to 2.5em (which is what you specified).

yes, that’s what i’m trying to do here but when i change to mobile view using dev tools it’s not changing. I tried changing browser and also opened site on mobile but it doesn’t seems to change. Can you tell me possible solutions to this.
ps. thanks in advance.

Hey, I tried it in Codepen and the Media Query is working perfectly, also I suggest that if you want to make if mobile friendly, then the #navigation and #last-nav should become more responsive, inside the media query. Something like the following:

@media screen and (max-width: 400px) {
	#navigation{
	    height: 10rem;
        flex-direction: column;
        justify-content: center;
	}

  #navigation  #last-nav{
        margin: 0px 16px;
  }
}

Also, add to #navigation outside the media query the flex-direction tag to work best.

Please note, that Chrome window can’t be shrunk lower than 500px, if you’re trying without Dev Tools, to check the code.

Try this out and I think it should work out just fine.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.