Using Flex box right alignment navbar (Media queries problem) in CSS Posted August 7, 2019 · Edited August 7, 2019 by Ayon Bit IMAGE ADDED 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>
Using Flex box right alignment navbar (Media queries problem)
in CSS
Posted · Edited by Ayon Bit
IMAGE ADDED
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>