Автоматическое изменение размера подложки на мобильных устройствах

Question

Всем привет! Ребят я новичок в верстке. Сайт написан при помощи бутстрапа. Проблема следующая: у блока с подложкой main_page на устройствах меньше 540, требуется убрать отступ снизу у картинки. Посоветовали так прописать, но это явно не верно.

 .main_page 
{
    position: relative;
    min-height: 100vh;
    margin: 0;
    padding: 0 0 10%;/*верно*/
    /*zoom: .8;*/
}

.container-fluid {
    height: 100%;
    padding-left: 0;
    padding-right: 0;
}

Само изображение

.img_mobile_right
{
    float: right;
    display: block;
    right: 5px;
    width: 24.5%;
    object-fit: cover;
    position: absolute;
    z-index: 1;
}

Буду благодарна любым ресурсам.

Answer 1

Вы можете воспользоваться @media-правилом для того что бы изменить значения у нужных Вам свойств при определенных размерах экрана устройства:

.main_page img {
  padding-bottom: 10%;
}


@media screen and (max-width: 540px) {
  .main_page img {
    padding-bottom: 0;
  }
}

БЛОГ НА HUSL

Автоматическое изменение размера подложки на мобильных устройствах

Ответы (1 шт):