I’ve been working on the website and it looks good on my screen. However, elements are all over the screen when I check my design with other resolutions. I’m new to web development, so I have a bad habit of moving items with top, right commands. Should I change the code itself or @media query would help me with that situation? If so, could you recommend a good tutorial? I’ll post a short snippet of my CSS to make it more clear what I’m dealing with.
.sidebar {
position: fixed;
width: 30%;
height: 100vh;
background: #312450;
font-size: 0.65em;
opacity: 0.8;
}
.container {
float:right; /* BE SITO PZDC BUNA KAZKODEL */
}
.logo {
padding-bottom: 3em;
z-index: 50;
width: 300px;
height: auto;
position: absolute;
left: 18%;
top: 10%;
}
img {
position: relative;
width: auto;
float: left;
height: 40vh;
z-index: 999;
padding: 2em 20px;
}
.nav {
position: relative;
margin: 0 15%;
top: 65%;
transform: translateY(-50%);
font-weight: bold;
animation: slide-up 1.1s ease;
}
.nav ul {
list-style-type: none; /* KAD NEBUTU JUODU TASKELIU */
}
.nav-item {
color: rgba(#FFF, 0.35);
display: block;
border-style: solid;
border-radius: 30px;
width: 380px;
text-transform: uppercase;
margin-top: 30px;
text-align: center;
list-style-type: none;
flex-direction: column;
padding: 1rem 2rem 1.15rem;
cursor: pointer;
animation: slide-up 1.1s ease;
}
/* kad visada baltas tekstas butu navbar */
.nav-item {
color: #fff;
text-decoration: none;
}
/* uzvedus pelyte orange spalva navbar */
.nav-item:hover {
color: #f98673;
}
/* icons virs orange teksto */
.icon {
width:85px;
height: auto;
margin-left: 7em;
margin-bottom: -20px;
position: relative;
}
/* tekstas apacioje */
.rows {
display: flex;
flex-direction: row;
width: 80%;
top: 32em;
float: right;
position: relative;
column-gap: 8px;
}Answer
its never to late for responsive webdesign. I always start with the desktop version.
First you need to create a media query at the end of your css file like:
@media only screen and (max-width: 479px) {}
There you can overwrite the other css commands.
Then you can copy the css commands inside:
@media only screen and (min-width: 480px) and (max-width: 719px) {}
There you need to edit and delete some css commands.
If nessisary you can also add a media query only for the Desktop version, wich means you can add some css commands and dont need to overwrite them for mobile or tablet:
@media only screen and (min-width: 1200px) {}