Image 1 (Current Layout)
Image 2 (Desired Layout)
I am trying to achieve a responsive layout similar to the second image. However, I seem to be stuck with the layout from the first image.
Here is the CSS code I'm currently using:
@media (max-width: 960px) {
.nav {
width: 100%;
height: 2em;
}
#nav-icon {
width: 100px;
height: 50px;
}
.container {
width: 100%;
margin: 0;
padding: 3%;
}
.container div {
display: inline;
width: 45%;
margin: 0;
padding: 1%;
}
.container div img {
width: 100%;
}
}
If anyone could offer assistance on how to achieve the desired layout, it would be greatly appreciated! Thank you!