I need assistance in making the left box and the right box stack vertically when viewed on a screen width of 600px or less. I have been able to achieve this for the navigation bar, but I am facing issues with implementing the same for the boxes. I have tried using floats, widths, and max-widths without success. My desired outcome is to have the right box appear below the left box without any overlapping or overflow.
.topnav {
background-color: pink;
overflow: hidden;
max-width: 80%;
margin-left: auto;
margin-right: auto;
}
.topnav a {
float: left;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
font-weight: bold;
}
.sidebar {
background-color: #fff5db;
width: 20%;
display: inline-block;
box-sizing: border-box;
float: left;
position: absolute;
}
.links-box {
background-color: none;
width: 100%;
border: 1px solid black;
display: inline-block;
box-sizing: border-box;
float: left;
padding: 10px;
}
.right-content {
background-color: #fff5db;
position: relative;
left: 21%;
max-width: 79%;
position: absolute;
right: 0px;
}
@media only screen and (max-width: 600px) {
#logo {
max-width: 100%;
}
.topnav {
float: none;
max-width: 100%;
}
.topnav a {
float: left;
width: 100%;
padding: none;
}
.sidebar {
max-width: 100%;
width: 100vw;
float: left;
clear: both;
box-sizing: content-box;
}
.introduction {
max-width: 100%;
width: 100%;
float: left;
}
.right-content {
max-width: 100%;
width: 100%;
float: left;
}
}<div class="topnav">
<a href="">link1</a>
<a href="">link2</a>
<a href="">link3</a>
<a href="">link4</a>
<a href="">link5</a>
<a href="">link6</a>
</div>
<div class="sidebar">
<div class="links-box">left box</div>
</div>
<div class="right-content">right box</div>(fiddle)