Forum:
I was coding my layout to make it look good on both... The problem is that when I try to make it look good on mobile, it looks bad on PC, and vice versa...
Could someone please help me? This is the code I had written, and with which I gave up:
/* Main structure */
.container {
display: flex;
justify-content: flex-start;
gap: 20px;
}
/* Settings for the main container and sidebar */
.profile {
display: flex;
flex-direction: row;
gap: 10px;
width: 100%;
}
/* Navigation bar as a secondary column next to the profile */
nav {
width: 200px;
background-color: #fff !important;
box-sizing: border-box;
border: 2px solid hotpink;
padding: 10px;
box-shadow: 0px 0px 9px;
margin-right: 20px;
}
.profile .right, .profile .left {
width: 100%;
background-color: #fff;
border: 2px dotted hotpink;
box-shadow: 0px 0px 9px;
padding: 10px;
}
main {
width: calc(100% - 240px);
background-color: transparent;
box-sizing: border-box;
padding: 10px;
}
/* smaller screens */
@media (max-width: 600px) {
.container {
flex-direction: column;
gap: 10px;
}
nav, .profile .right, .profile .left {
width: auto;
margin: 0;
}
main {
width: 100%;
}
}
Report Topic
