Home Ask Login Register

Developers Planet

Your answer is one click away!

Morgan February 2016

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

ok so when you go on a mobile screen how do you get the boxes to close the gap and like, stack and stuff? thank you i am new to coding. the gap is fine full screen but when it gets smaller it is weird. any 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 a {
      display: inline-block;
      height: 100%;
      width: 100%;
      color: white;
      text-decoration: none;
    }


<!DOCTYPE html>
<ht        

Answers


Mark Ireland February 2016

You could use the @media command to have a custom style for specific screen sizes

@media screen and (max-width:480px){Your css here}

Post Status

Asked in February 2016
Viewed 1,904 times
Voted 10
Answered 1 times

Search




Leave an answer


Quote of the day: live life