html - How do I make my website look the same at every screen while using padding to position stuff? -


i'm creating website grid. made site's navbar (without actual links) , used grid. want position stuff in different div's.

i have been told should use padding this, did. worked fine until checked on second monitor different screen size. things drop of screen or show on next line. when didn't use padding never happened.

how can position objects inside div without losing advantages of using grid system?

.col-1 {width: 8.33%;}  .col-2 {width: 16.66%;}  .col-3 {width: 24.99%;}  .col-4 {width: 33.32%;}  .col-5 {width: 41.65%;}  .col-6 {width: 49.98%;}  .col-7 {width: 58.31%;}  .col-8 {width: 66.64%;}  .col-9 {width: 74.97%;}  .col-10 {width: 83.30%;}  .col-11 {width: 91.63%;}  .col-12 {width: 100%;}      * {      box-sizing: border-box;  }    body {      margin: 0px;      padding: 0px;      font-family: montserrat;  }    [class*="col-"] {      float: left;  }    .row:after {      content: "";      clear: both;      display: block;  }    .container {      width: 100%;      margin-left: auto;      margin-right: auto;  }    .navbar {      height: 40px;      background-color: #f27405;      color: white;  }    .stripemenu {      padding-left: 1%;      position: relative;  }    .menupos {      padding-top: 7%;  }    .space {      padding-top: 9px;  }    .icon {      position: relative;      padding-top: 4px;  }    .iconpos {      padding-left: 45%;      position: relative;  }    .share {      padding-left: 150px;      padding-top: 6px;  }
<!doctype html>  <html>  <link rel="stylesheet" type="text/css" href="grid.css">    <body>    <div class="container">      <div class="row navbar col-12">        <div class="col-1 stripemenu">          <img src="menu.png">        </div>        <div class="col-1 space">space</div>        <div class="col-9 icon">          <img src="icon.png">        </div>        <div class="col-1 share">          <img src="share.png">        </div>      </div>      <!--ending of first row div -->      </div>    <!--ending of container div -->  </body>    </html>

i revised css code , navigation-bar's elements don't change positions. suggest use min-width columns collapse when window resized.

.col-1 {width: 8.33%;} .col-2 {width: 16.66%;} .col-3 {width: 24.99%;} .col-4 {width: 33.32%;} .col-5 {width: 41.65%;} .col-6 {width: 49.98%;} .col-7 {width: 58.31%;} .col-8 {width: 66.64%;} .col-9 {width: 74.97%;} .col-10 {width: 83.30%;} .col-11 {width: 91.63%;} .col-12 {width: 100%;}   * {     box-sizing: border-box; }  body {     margin: 0px;     padding: 0px;     font-family: montserrat; }  [class*="col-"] {     float: left; }  .row:after {     content: "";     clear: both;     display: block; }  .container {     width: 100%;     margin-left: auto;     margin-right: auto; }  .navbar {     height: 40px;     background-color: #f27405;     color: white; }  .stripemenu {     padding-left: 1%;     position: relative;     padding-top: 6px; }  .menupos {     padding-top: 7%; }  .space {     padding-top: 9px; }  .icon {     padding-top: 6px; }  .iconpos {     padding-left: 45%;     position: relative; }  .share {     padding-top: 6px; }

Comments

Post a Comment