Размер промокарточки в мобильной версии Есть решение


Как сделать, чтобы промокарточки в мобильной версии были по ширине экрана?

2 ответа
  • Сергеев Владимир
    Разработчик
    Решение
    25 февраля 2020 12:32

    Посмотрел ваши промо-карточки. 

    Все проблемы от того, что текст нанесён на картинку. 
    Если бы вы добавили пустую картинку, а текст добавляли через описание промо-карточки, то было бы и адаптивно и красиво. 

    В данном случае промо-карточки обрезаются по вертикали. 
    Самое оптимальное – это на разной ширине экрана делать разную высоту блока с карточкой. 

    В блок upstore.user_css добавьте код: 

    @media (max-width:1023px) {
      /* Высота блока промо-карточки на планшетах */
      .home-promos-wrapper .height-400.uk-overflow-hidden {
        height:670px;
      }
    }
    
    @media (max-width:767px) {
    /* Высота блока промо-карточки на широких телефонах */
      .home-promos-wrapper .height-400.uk-overflow-hidden {
        height:480px;
      }
    } 
    
    @media (max-width:736px) {
    /* Высота блока промо-карточки на больших айфонах */
      .home-promos-wrapper .height-400.uk-overflow-hidden {
        height:370px;
      }
    }
    
    @media (max-width:667px) {
    /* Высота блока промо-карточки на обычных айфонах */
      .home-promos-wrapper .height-400.uk-overflow-hidden {
        height:250px;
      }
    }
    @media (max-width:568px) {
    /* Высота блока промо-карточки на маленьких айфонах */
      .home-promos-wrapper .height-400.uk-overflow-hidden {
        height:210px;
      }
    } 

  • Сергеев Владимир
    Разработчик
    Решение
    24 февраля 2020 13:39

    Здравствуйте, Евгения! 

    1. Я не увидел на вашем сайте промо-карточек, кроме главного слайдера. 
      Он, в свою очередь, во всю ширину экрана. 
    2. Те промо-карточки, которые идут после главного слайдера (которых у вас на сайте нет), в мобильной версии и так отображаются во всю ширину. 


Добавить ответ
Чтобы добавить комментарий, зарегистрируйтесь или войдите
Мы получаем и обрабатываем персональные данные посетителей нашего сайта в соответствии с официальной политикой.
Если Вы продолжите использовать сайт, мы будем считать, что Вас это устраивает.
Подписывайтесь и получайте скидки!

Узнавайте первым о скидках и специальных предложениях!