@seminyuri

Как адаптировать блок с 4-мя картинками разного размера?

Доброй ночи, ломаю голову как сделать блок адаптивным. Перерыл кучу материала, но из-за разности размера ничего не выходит. Подскажите пожалуйста как поступить. Код прилагаю

P.S. Пытался, что-то вроде этого провернуть, но как и с предыдущим - четно
.documents__image-wrap {
	position: relative;
  width: 100%;
  margin: 0;
  padding: 0;
}
.documents__image-wrap li {
  position: relative;
  display: inline-block;
  width: 50%;
  list-style-type: none;
}

.documents__image-wrap a {
  display: block;
}
  • Вопрос задан
  • 86 просмотров
Пригласить эксперта
Ответы на вопрос 2
@Shiki00
Сначала добавьте в head вьюпорт:
<meta name="viewport" content="width=device-width, initial-scale=1.0">

А Дальше в конец css кода добавьте:
@media only screen and (max-width: 768px) {
  
}

max-width в скобках означает, ниже какого кол-во пикселей будут показываться изменения введенные внутри медиа.
Например, если вы хотите ограничить размер дива, то делаете так:
@media only screen and (max-width: 768px) {
  div {
    max-width: 50%;
  }
}

А в идеале почитайте:
https://www.w3schools.com/css/css_rwd_mediaqueries.asp
Ответ написан
IlyaDeveloper
@IlyaDeveloper
UX/UI Дизайнер
Привет легко, способов много как вариант так смотреть, и здесь не нужно кучу медиа запросов писать, Можешь на grid сделать сетку тогда будет проще и можно будет внутри с картинкам красиво заморочиться.

К слову тебя в примере что скинул в очень много лишнего кода в стилях, в js и в семантике, учись писать чисто и следовать методологиям, это так прийми на заметку!
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы