Подогнать 2 блока

Одна из самых популярных систем управления контентом — Wordpress.
solo

Подогнать 2 блока

solo 07 авг 2019, 00:22 Сообщение

Спасибо, получилось

solo

Подогнать 2 блока

solo 07 авг 2019, 00:29 Сообщение

Ещё одна загвоздка. На другой страничке https://potolokroom.ru/vidy/ стоят два блока с фото.
Вопросик: правильно ли я прописал код html для блока и стили css??
И второе: при уменьшении экрана браузера все начинает ломаться.
Помогите пожалуйста!
Заранее спасибо.

Аватара пользователя
CabinetAdmin

Подогнать 2 блока

CabinetAdmin 07 авг 2019, 11:51 Сообщение

Ломается, потому что для блоков указанны фиксированные размеры:

Код: Выделить всё

.vies{ font-family: sans-serif; width: 300px; height: 186px; border: 10px solid transparent; box-shadow: 1px 1px 8px rgba(170, 170, 170, 0.49); /* Обязательные условия*/ position: relative; overflow: hidden; }

и здесь:

Код: Выделить всё

.vies .mask{ width: 300px; height:186px; text-align: center; /* Обязательные условия*/ position: absolute; overflow: hidden; top: 0; left: 0; }

если поменять размеры width и height на auto. У .vies .mask у width сделать 100%.
Плюс для изображения надо задать 100% ширину...

В общем если смотреть весь код, то так:

Код: Выделить всё

.vies { font-family: sans-serif; width: auto; height: auto; border: 10px solid transparent; box-shadow: 1px 1px 8px rgba(170, 170, 170, 0.49); /* Обязательные условия*/ position: relative; overflow: hidden; } a { display:block; } .mask h2 { color: #4b4848; font-size: 13px; font-weight: 400; line-height: 40px; letter-spacing:1px; margin-top: 10px; padding: 0 5px; text-transform: uppercase; text-shadow: 1px 1px 1px #0d0a0b; background: rgba(248, 194, 71, 0.6); } .vies .mask { width: 100%; height: auto; text-align: center; /* Обязательные условия*/ position: absolute; overflow: hidden; top: 0; left: 0; } .vies img { transition: all ease-in .5s; margin-bottom: 0; width: 100%; } .vies:hover img { box-shadow: 3px 3px 5px #000; transform: scale(1.5, 1.5); }


Вот так всё будут работать как надо.
Хочешь поблагодарить? Есть способы - Поддержать проект


Похожие темы

Вернуться в «WordPress»

Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и 1 гость