Как скрыть элемент при изменении размеров экрана с помощью медиа запросов?
<div class="row row-1"> <img src="img/Welcom1.png"> </div> <div class="row row-11"> <img src="img/Welcome11.png"> </div> |
<div class="row row-1"> <img src="img/Welcom1.png"> </div> <div class="row row-11"> <img src="img/Welcome11.png"> </div>
.row-1 { margin-top: 1rem; } @media (max-width: 768px) { .row-1 { display: none; } } @media (min-width: 769px) { .row-11 { display: none; } } |
.row-1 { margin-top: 1rem; } @media (max-width: 768px) { .row-1 { display: none; } } @media (min-width: 769px) { .row-11 { display: none; } }
Хочу при определённой широте экрана скрыть один элемент, а другой оставить видимым. И наоборот.
Но по какой-то причине скрыт только один элемент (row-11), а другой (row-1) всегда видимый. Подскажите, что не так
Дополнительно:
да все правильно
https://codepen.io/delphinpro/pen/KKJqNoJ
Если вы меняете картинку, то используйте специально для этого придуманный тег picture
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для скрытия элемента при изменении размеров экрана с помощью медиа запросов можно использовать CSS и @media правила. Например, если вы хотите скрыть элемент при ширине экрана менее 600px, вы можете использовать следующий код:
@media screen and (max-width: 600px) { .element-to-hide { display: none; } }
В данном примере мы используем @media screen and (max-width: 600px) для определения условия, при котором будет применяться стиль для элемента. Внутри блока @media указываем селектор элемента, который мы хотим скрыть, и задаем ему свойство display: none; для скрытия.
Таким образом, при изменении размеров экрана до ширины менее 600px, элемент с классом .element-to-hide будет скрыт.
Не забудьте подставить свой собственный селектор элемента вместо .element-to-hide в приведенном примере. Также вы можете изменить условие медиа запроса (max-width, min-width и т. д.) и значение ширины экрана по вашему усмотрению.