Media query not responding

HTML-CSS
1

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:

3

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.

4

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.

5

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