Search code examples
htmlcssmedia-queriesresponsive

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;
    
}

Solution

  • 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) {}