Вот решил переверстать один учебный проект с помощью flexbox. Всё получилось. Но, когда я задал media-запрос, чтобы уменьшить шрифт MOVE в случае использования мобильных экранчиков, обнаружил, что media не срабатывает и шрифт остаётся такой же. Соответственно, блоки не могут адаптироваться. Подскажите, совместимы ли flexbox и media и как выправить ситуацию. Вот кусочек кода:
`
Form healthy habits to take your fitness to the next level.
И CSS
html, body {
margin: 0;
}
.block {
width: 100%;
min-height: 600px;
display: flex;
}
.block1 {
background: url(“https://s3.amazonaws.com/codecademy-content/projects/move/bg.jpg”) no-repeat;
background-size: cover;
background-position: center center;
}
.inter_block {
min-height: 200px;
background-color: black;
}
.block1 .container {
display: flex;
flex-basis: 30%;
flex-wrap: wrap;
margin: auto;
margin-top: 100px;
}
.block1 h1 {
flex-basis: 100%;
margin: 0;
font-family: ‘Oswald’, sans-serif;
font-size: 12.5em;
color: #ffffff;
}
.container p {
flex-basis: 100%;
margin: 0;
margin-bottom: 20px;
color: #ffffff;
font-family: Helvetica, Arial, sans-serif;
font-size: 1.125em;
}
.btn {
flex-basis: 100%;
max-width: 143px;
height: 34px;
margin-left: 154px;
padding-top: 8px;
text-align: center;
font-size: 1.125em;
background-color: #000000;
color: #ffffff;
font-family: ‘Oswald’, sans-serif;
}
.btn:hover {
background-color: #ffa800;
}
@media (max-width: 420px;) {
.block1 h1 {
font-size: 1em;
}
}
А давайте через песочницу, а?
Давайте, что-то сегодня не получается нормально html вставить ((
Скажите, а регистрироваться в песочнице нужно, чтобы вставить код и взять ссылку? Никогда не пользовался ранее
Зарегистрируйтесь, пожалуйста. И подтвердите адрес почты.
Такая мелочь оказалась) Точка с запятой лишняя в правиле @media:
@media (max-width: 420px) {
.block1 h1 {
font-size: 1em;
}
}Ох, вот ещё только вчера стал пробовать формат медиа-запроса, ещё не выучил его, вот и напартачил ((. Да, мелочь, а всё сломала (( Спасибо Вам за помощь!! Если не сложно, оцените, пожалуйста, этот код ещё…
Фиксированная высота у кнопки не нравится мне. Обычно размеры кнопок определяются внутренними отступами. А еще это скорее всего должна быть ссылка, а не div.
Понятно, поработаю ещё и довершу остальные части этого же проекта. Ещё раз огромное спасибо!!
Простите, что ещё раз побеспокою сегодня: в песочнице всё работает прекрасно, адаптивность супер. Но при запуске с компьютера в браузере, если нажать F12 и потягать ширину, появляются белые полосы и вновь величина MOVE не меняется (( С чем это может быть связано? Что-то не так в коде или же браузеры пока некорректно поддерживают flexbox?
Какой браузер?
Гугл Хром
Что придумать… Давайте код архивом на почту. Больше ничего в голову не приходит.