in html and css how to get the box space to be smaller? -


ok when go on mobile screen how boxes close gap , like, stack , stuff? thank new coding. gap fine full screen when gets smaller weird. suggestions?

      top: 23%;       left: 30%;       color: white;       font-family: arial;       font-size: 4.6vw;       letter-spacing: 1px;     }     p {       position: absolute;       width: 250px;       top: -1px;       left: 15px;       height: 25px;       font-family: arial;     }     ul {       word-spacing: .2em;       letter-spacing: .2em;     }     ul li {       font-family: arial;       text-align: center;       vertical-align: middle;       line-height: 40px;       top: 43%;       display: inline-block;       margin-top: 250px;       margin-left: 115px;       letter-spacing: 1px;       word-spacing: normal;       background-color: rgba(5, 4, 2, 0.1);       border: 2px solid white;       color: white;       text-align: center;       text-decoration: none;       font-size: 90%;       width: 150px;       height: 40px;     }     ul li:link,     ul li:visited {       font-family: arial;       text-align: center;       vertical-align: middle;       line-height: 40px;       display: inline-block;       margin-top: 250px;       margin-left: 115px;       letter-spacing: 1px;       word-spacing: normal;       background-color: rgba(5, 4, 2, 0.1);       border: 2px solid white;       font-size: 90%;       width: 150px;       height: 40px;       text-decoration: none;       color: white;     }     li {       text-decoration: none;       color: white;     }     ul li:hover,     ul li:active {       background-color: white;       color: black;       text-decoration: none;     }      ul li a:hover, ul li a:active {       background-color: white;       color: black;     }        ul li {       display: inline-block;       height: 100%;       width: 100%;       color: white;       text-decoration: none;     }   <!doctype html> <html> <link rel="shortcut icon" href="https://upload.wikimedia.org/wikipedia/commons/thumb/5/5e/metro-m.svg/2000px-metro-m.svg.png"> <head> <link rel="stylesheet" type="text/css" href="m.css"> <title>morgan</title>  </head> <body> <center><h1>a girl passion</h1></center> <ul> <li><a href="www.youtube.com" class="life" ><strong>my life</strong></a></li> <li><a href="www.youtube.com" class="prot"><strong>portfolio</strong></a></li> <li><a href="www.youtube.com" class="resume"><strong>resume</strong></a></li> <li><a href="www.youtube.com" class="me"><strong>about me</strong></a></li> </ul> </body> </html> 

you use @media command have custom style specific screen sizes

@media screen , (max-width:480px){your css here} 

Comments

Popular posts from this blog

routing - AngularJS State management ->load multiple states in one page -

python - GRASS parser() error -

Swift game error message -