media query not taking effect |
media query not taking effect |
mp3909 |
May 18 2020, 11:53 AM
Post
#1
|
Novice Group: Members Posts: 20 Joined: 4-April 20 Member No.: 27,264 |
Why is my media query not working?
When screen size is less than 760px, then font size of the "a tags" should be 2rem. When screen size is greater than or equal 760px then font size of the "a tags" should be 0.7rem. But it seems like this is not taking effect. Here is my html: CODE <!DOCTYPE html> <html> <header> <title></title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="nestedFlex.css"> </header> <body> <div class="wrapper"> <nav> <ul class="non-social"> <li><a href="#">home</a></li> <li><a href="#">about us</a></li> <li><a href="#">contact us</a></li> <li><a href="#">store</a></li> </ul> <ul class="social"> <li><img src="images/facebook.png"></li> <li><img src="images/twitter.png"></li> </ul> </nav> </div> </body> <html> And here is my css: CODE html { font-size: 16px; } nav { display: grid; grid-template-columns: 1fr; justify-content: center; background-color: #333; } nav ul { padding-left: 0px; text-align: center; margin: 0; } nav li { list-style-type: none; display: block; padding: 2px; } nav a { text-decoration: none; color: #fff; display: block; font-size: 2rem; } nav li:hover { background-color: #555; } .social { display: flex; justify-content: center; } @media screen and (min-width:760px) { nav a { font-size: 0.7rem; } } |
Christian J |
May 18 2020, 02:56 PM
Post
#2
|
. Group: WDG Moderators Posts: 9,650 Joined: 10-August 06 Member No.: 7 |
Works for me in all my browsers.
|
Lo-Fi Version | Time is now: 17th April 2024 - 11:10 PM |