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
Post a Comment