Is it too late to make responsive design

enter image description hereI’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) {}

Leave a Reply

Your email address will not be published. Required fields are marked *