I first created the desktop version of a website I'm working on for a friend, and so, to make the site more organized for mobile use, I've been using media queries. However I don't know how to organize the navbar vertically. And, as well, I don't know how to make the content section itself of the blog NOT scroll horizontally.
Below are two images (dismiss the portuguese on the site):
This one is showing how the navbar isn't vertically oriented.
This one shows, if you pay attention, how the web page scrolls to the side, which I don't want to happen.
And now, here is the HTML code for this specific page:
<body>
<a href="index.html"><h1 class="title">thrumilieyes</h1></a>
<ul id="nav">
<li><a href="colagens.html">Colagens</a></li>
<li><a href="resenhas.html">Resenhas</a></li>
<li><a href="miscelanea.html">Miscelânea</a></li>
<li><a href="how-to.html">How to</a></li>
<li><a href="tudo.html">Tudo</a></li>
</ul>
<h3 class="box-title">Miscelânea</h3>
<div class="main-box">
<h3 class="post-title">Bocas</h3>
<p class="time">Postado 12/12/2023 às 17:15</p>
<p class="post">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A reiciendis
eius inventore exercitationem sed sit obcaecati voluptates iure ipsam!
Cum sapiente quod doloribus suscipit, odit accusamus iusto commodi eum
dolores aut quaerat impedit ex culpa doloremque incidunt aperiam odio
sit, ipsam magnam. Unde assumenda molestiae maiores libero natus ab
quae.
</p>
</div>
</body>
And the CSS:
* {
box-sizing: border-box;
padding: 0;
margin: 0;
font-family: maybe;
}
@font-face {
font-family: maybe;
src: url(RobotoSlab-VariableFont_wght.ttf);
}
@font-face {
font-family: maybe2;
src: url(CourierPrime-Regular.ttf);
}
body {
background-color: #3f517f;
}
.title {
text-align: center;
font-size: 4em;
color: azure;
margin-top: 0.25em;
}
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
text-decoration-color: azure;
}
#nav {
width: auto;
margin: auto;
padding: 0;
list-style: none;
background-color: #f2f2f2;
border: 1px solid #ccc;
display: table;
}
#nav li {
float: left;
}
#nav li a {
display: block;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
color: #069;
border-right: 1px solid #ccc;
}
#nav li a:hover {
text-decoration: underline;
background-color: #fff;
}
#nav li:last-child a {
border: none;
}
.box-title {
text-align: center;
font-family: maybe;
margin-top: 1em;
margin-bottom: 1em;
color: azure;
}
.main-box {
width: 50vw;
min-width: 30em;
margin-left: auto;
margin-right: auto;
border: 1px solid azure;
background-color: azure;
text-align: justify;
text-justify: inter-word;
}
.post-title {
color: #069;
margin-top: 0.2em;
margin-left: 0.25em;
}
.time {
margin-left: 0.25em;
font-size: 0.9em;
font-weight: 600;
color: rgb(26, 112, 156);
}
.post {
font-size: 0.9em;
font-family: maybe2;
margin-left: 0.25em;
margin-top: 0.8em;
margin-right: 0.25em;
}
.main-box .first {
width: 75%;
margin-top: 1.25em;
margin-bottom: 1.25em;
margin-left: auto;
margin-right: auto;
display: block;
}
I'm sorry if the code is too long but I really am sort of lost on how to fix this problem. Thanks in advance!
Add these lines:
@media (max-width: 480px) {
#nav {
display: flex;
flex-direction: column;
}
.main-box {
min-width: unset;
}
}