Поплыла верстка в категориях

Тема в разделе "Ошибки и их решения", создана пользователем Olga-Lapnina, 15 ноя 2022.

  1. Olga-Lapnina

    Olga-Lapnina Новичок

    Сообщения:
    16
    Симпатии:
    0
    Здравствуйте уважаемые форумчане!

    Помогите пожалуйста решить проблему с поплывшей версткой. Серия Премьер (dveri-premier.ru). При наведении указателя мыши на верхнюю, крайнюю правую дверь (Премьер П01), плывет верстка, изображение снизу переходит под эту дверь.

    Заранее благодарна.
     

    Вложения:

    • verstka 2.jpg
      verstka 2.jpg
      Размер файла:
      198,8 КБ
      Просмотров:
      6
  2. Blast

    Blast Продвинутый пользователь

    Сообщения:
    212
    Симпатии:
    74
    неправильно вычисляется высота блока при наведении. можно залезть в js поправить, можно стилями, например
    Код:
    @media(min-width: 1200px) {
    .product-layout.product-grid:nth-child(3n+1) {
      clear: left;
    }
    }
    @media(max-width: 1199px) {
    .product-layout.product-grid:nth-child(2n+1) {
      clear: left;
    }
    }
     
    Olga-Lapnina и Tom нравится это.
  3. Olga-Lapnina

    Olga-Lapnina Новичок

    Сообщения:
    16
    Симпатии:
    0
    Спасибо большое !!!
     
  4. SiteMix

    SiteMix Продвинутый пользователь

    Сообщения:
    1.021
    Симпатии:
    174
    У вас установлен большой размер картинки в категориях, который, к тому же, имееет неудачную пропорцию. При масштабировании высота получается с десятыми, а при наведении задаётся фиксированная высота карточки с целым числом и этого достаточно чтобы вёрстка поехала.

    В общем, измените размер картинки в "Размер изображения в списке товаров" и проблема уйдёт. Путь: Дополнения - Дополнения. В выпадающем списке выбрать "Шаблоны", а там Шаблон UniShop.
    Сделайте, например, 248 x 200 рх, а если размер специально сделан большим для лучшего отображения на мобильниках, то 496 х 400 рх.
     
    Olga-Lapnina нравится это.
  5. Olga-Lapnina

    Olga-Lapnina Новичок

    Сообщения:
    16
    Симпатии:
    0
    Преогромнейшее спасибо !!!