Hi guys,
I have a vertical list menu on the wider screens. I want to make it a horizon menu on smaller screens.
I also want to center those menus but they stick to the left.
How do I solve this?
Here’s my code:
<!DOCTYPE html>
<html>
<head>
<style>
.list {
position: fixed;
right: 0;
top: 8em;
padding: 0.6em 0.4em;
border: 0.07em solid #656565;
}
.list li {
cursor: pointer;
margin: 1em 0;
}
.list li:first-child { margin-top: 0; }
.list li:last-child { margin-bottom: 0; }
@media (max-width: 40em) {
.list {
position: static;
padding: 0.6em;
}
.list li {
display: inline-block;
text-align: center;
vertical-align: middle;
margin: 0 0.3em;
}
}
</style>
</head>
<body>
<ul class=list>
<li>B1</li>
<li>B2</li>
<li>B3</li>
</ul>
</body>
</html>Thank you,
