Ayon Bit
-
Posts
1 -
Joined
-
Last visited
Ayon Bit's Achievements
Newbie (1/7)
0
Reputation
-
PROBLEM ::: .navbar >:nth-child(3){margin:auto; } hover is not working in the media quires. Is there any other solution for this code? <!doctype html> <html> <head> <meta charset="utf-8"> <title>Untitled Document</title> <meta name="viewport" content="width=device-width,initial-scale=1"> <style> *{box-sizing: border-box;} .navbar { display: flex; background-color: #333; } .navbar > :nth-child(3){ margin-right: auto; } .navbar a{ color: white; text-align: center; text-decoration: none; padding: 14px 20px; } .navbar a:hover { background-color: #A4A1A1; } @media screen and (max-width:700px){ .navbar { flex-direction: column; } .navbar >:nth-child(3){ margin:auto; } } </style> </head> <body> <div class="navbar"> <a href="#">Home</a> <a href="#">News</a> <a href="#">About</a> <a href="#">Contact</a> </div> </body> </html> <!doctype html> <html> <head> <meta charset="utf-8"> <title>Untitled Document</title> <meta name="viewport" content="width=device-width,initial-scale=1"> <style> *{box-sizing: border-box;} .navbar { display: flex; background-color: #333; } .navbar > :nth-child(3){ margin-right: auto; } .navbar a{ color: white; text-align: center; text-decoration: none; padding: 14px 20px; } .navbar a:hover { background-color: #A4A1A1; } @media screen and (max-width:700px){ .navbar { flex-direction: column; } .navbar >:nth-child(3){ margin:auto; } } </style> </head> <body> <div class="navbar"> <a href="#">Home</a> <a href="#">News</a> <a href="#">About</a> <a href="#">Contact</a> </div> </body> </html>