TechBlogSD - Все для WordPress и WEB разработки
WEB и WordPress инструкции, новости, обзоры тем и плагинов

Центрирование флипбокса для мобильных устройств

792

Предлагаю такое решение:

@media screen and (max-width: 780px) { .kc-flip-container .flipper{ width: 300px !important; float: inherit !important; top: calc(50% - 150px)!important; left: calc(50% - 150px)!important; } }

Здесь отдельно стоит отметить данный блок:

top: calc(50% - 150px)!important; left: calc(50% - 150px)!important;

top: calc(50% — 150px) (150px — это высота флипбокса деленная на два)

left: calc(50% — 150px) (150px — это ширина флипбокса деленная на два)

ПС. По сути при помощи указания только этих двух свойств можно прекрасно отцентровать практически любой элемент на странице.

Источник записи: https://mediadoma.com

Leave A Reply

Этот веб-сайт использует файлы cookie для улучшения вашего опыта. Мы предполагаем, что вы согласны с этим, но вы можете отказаться, если хотите. ПринимаюПодробнее