Сообщений в теме: 3

[Максим Бакланов]

1. Помогите выровнять картинки категорий по нижнему краю. Сейчас выравнивание по верхнему и смотрится некрасиво.
2. Очень нужно, чтобы названия категорий были видны постоянно, а не только при наведении мыши и чтобы серый фон под картинкой (не под названием категории) при этом не появлялся.
Аккаунт SL-495846

Прикрепленные изображения

• 

[Firefly]

Максим Бакланов (11 Февраль 2020 - 16:04) писал:

1. Помогите выровнять картинки категорий по нижнему краю. Сейчас выравнивание по верхнему и смотрится некрасиво.
2. Очень нужно, чтобы названия категорий были видны постоянно, а не только при наведении мыши и чтобы серый фон под картинкой (не под названием категории) при этом не появлялся.
Аккаунт SL-495846

2. Изменения Вам внесли.

По первому пункту дело в самих картинках, необходимо их обрезать и отцентрировать в редакторе.

[Максим Бакланов]

Firefly (11 Февраль 2020 - 19:44) писал:

По первому пункту дело в самих картинках, необходимо их обрезать и отцентрировать в редакторе.

Дело в том, что у них размеры разные и самая маленькая (многоэтажный дом) выглядит больше всех. И видно, что картинки центрируются по верхнему краю таблицы. Сделайте центровку по нижнему краю и увидите о чём я

[Vaccina]

Здравствуйте.

Уточните пожалуйста, актуален ли еще ваш вопрос? Сейчас у вас иные изображения и стоят они ровно относительно друг друга.
Для выравнивания по нижнему краю зайдите в раздел Сайт - Редактор шаблонов - main.css - найдите:

.categories .item .image {display: table-cell;vertical-align: middle;width: 270px;height: 270px;}
.categories .item .image img {display: block;margin: 0 auto;max-width: 100%;}
.cat-info {display: inline-block;position: relative;overflow: hidden;width: 100%;vertical-align: middle;cursor: pointer;}

замените на:

.categories .item .image {display: table;width: 270px;height: 270px;}
.categories .item .image img {display: inline-block;margin: 0 auto;max-width: 100%;position: relative;}
.cat-info {display: table-cell;position: relative;overflow: hidden;width: 270px;vertical-align: bottom;cursor: pointer;height: 270px;}