Salve ragazzi, eccomi tornato qua con un nuovo problema. Vi spiego la situazione, sto facendo un sito web e ho iniziato a programmarlo da pc, quindi adattando tutto a quello schermo. Ora sto iniziando ad adattarlo a schermi con un width minore, quindi ho iniziato a prendere le misure facendo cambiare colore alle scritte di una classe, e fin qui tutto bene. Ora il mio intento era di diminuire il font-size all'interno di una classe, ma non funziona!! Non cambia nemmeno colore quindi immagino che il problema sto nella classe. Ecco il codice:
HTML:
<!doctype html>
<html>
<head>
<title>sito</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<div class="navbar">
<div class="font1">
<a href="html/aboutme.html">ABOUT ME</a>
</div>
<div class="font1">
<a href="html/portfolio.html">PORTFOLIO</a>
</div>
<div class="font1">
<a href="html/info.html">INFO</a>
</div>
</div>
</body>
</html>
CSS:
@media only screen and (max-width: 1350px) {
.font1 {
font-size: 20px;
}
}
.navbar {
padding-top: 30px;
}
.font1 {
font-family: Trebuchet MS,Georgia,sans-serif;
font-size: 40px;
font-weight: bold;
letter-spacing: 20px;
display: inline-block;
text-align: center;
margin: 2%;
padding-bottom: 10px;
width: 370px;
text-transform: uppercase;
}
.font1:hover {
color: #00b888;
}
.font1:after {
display: block;
content: '';
border-bottom: solid 5px #00b888;
transform: scaleX(0);
transition: transform 250ms ease-in-out;
transform-origin: 50% 50%;
}
.font1:hover:after {
transform: scaleX(1);
transform-origin: 50% 50%;
}
