Здравствуйте, я использую SCSS для стилизации страницы. У меня есть тег h2 с идентификатором title, который имеет изначально определенный размер. Я хочу что бы при максимальной ширине экрана в 320px менялся размер шрифта у тега h2, но этого не происходит. Пробовал менять цвет шрифта, и все работает, но с размером нет. Ниже код
form {
display: flex;
flex-direction: column;
#title {
font-size: $fontSize;
font-weight: $fontWeight;
}
.button-div {
display: flex;
flex-direction: column;
margin-top: 10px;
button {
position: relative;
left: 50%;
transform: translateX(-50%);
width: $buttonWidth;
height: $buttonHeight;
margin-top: 20px;
outline: none;
border: none;
border-radius: 5px;
color: white;
font-size: $buttonFontSize;
}
#facebook-btn {
background-color: #064ebb;
}
#google-btn {
background-color: #6d1ea6;
}
#facebook-btn:hover {
background-color: #0644a1;
cursor: $buttonCursor;
}
#google-btn:hover {
background-color: #53177e;
cursor: $buttonCursor;
}
}
#email-link {
text-decoration: none;
margin-top: 30px;
span {
padding-left: 10px;
}
}
#email-link:hover {
text-decoration: underline;
}
}
/*iphone 5 breakpoint*/
$iphone-breakpoint: 320px;
/*media queries*/
@media (max-width: $iphone-breakpoint) {
form {
#title {
color: green;
font-size: 18px;
}
}
}
Изменено: Размер шрифта изначально 48px