Адаптивная верстка DIV [закрыт]

205

14 октября 2021, 02:50

Закрыт. Этот вопрос не по теме. Ответы на него в данный момент не принимаются.

Хотите улучшить этот вопрос? Обновите вопрос так, чтобы он вписывался в тематику Stack Overflow на русском.

Закрыт 1 год назад.

Улучшить вопрос

Есть страница на сайте https://finansanswer.ru/mikrozajmy/na-kartu-sberbanka/, на которой есть div с предложением микрозаймов.

Вопрос: что мне нужно в таблицу стилей прописать, чтобы верстка была адаптивной и на мобильных устройствах, к примеру, как здесь: allzaims.ru/karta-sberbanka/?
Я так понимаю - какие-то ограничения для расширения экрана.

Буду благодарен, если покажите пример того, что нужно сделать. Спасибо!

Answer 1

Пропишите желаемый размер для нужного div в медиа-запросах нужного размера, например:

/* для экранов в 992px или меньше */
@media screen and (max-width: 992px) {
  .mydiv {
    max-width: 300px /*или в процентах, например*/
 /* или так, например:
     .mydiv {
width: 100%;
min-width: 100px;
max-width: 300px;
   }  */
  }
}
/* для экранов в  600px или меньше*/
@media screen and (max-width: 600px) {
  .mydiv {
    max-width: 100px /*или в процентах, например*/
  }
}