Не нравятся результаты поиска? Попробуйте другой поиск!
dle-faq.ru FAQ (все вопросы) Шаблоны (TPL) Как адаптировать краткую новость при помощи css?

Как адаптировать краткую новость при помощи css?


     06.11.2015    Шаблоны (TPL), Стили (CSS)    732

вопрос
Можно ли как сделать адаптацию с помощью css?
При смене разрешения на более меньшее, вторая колонка смещается в низ:
Как адаптировать краткую новость при помощи css?
Вот так должно быть:
Как адаптировать краткую новость при помощи css?
Вот css код:
.short_video_block{
    height: 180px;
    background: #FFF;
    float: left;
    margin-right: 15px;
    margin-bottom: 24.6px;
}

.short_video_block:nth-child(2n){
    margin-right: 0px;
}

.prev_short_video{
    width: 360px;
    position: relative;
    height: 150px;
    overflow: hidden;
    box-shadow: 0 0 5px;
    border: 1px solid #FFFFFF;
    margin: 14px 10px 7px 0;
}

.prev_short_video img{
    width: 360px;
    min-height: 150px;
}

.title_short_video{
    width: 340px;
    height: 30px;
    line-height: 30px;
    padding: 0 10px;
    font-size: 13px;
    font-weight: 600;
    font-style: normal;
    color: #4D556E;
}

.short_video_block:hover > a > .title_short_video{
    cursor: pointer;
    text-decoration: underline;
    color: #313746;
}

.prev_short_video:before{
    position: absolute;
    width: 360px;
    height: 150px;
    top: 0;
    left: 0;
    background: rgba(255,255,255,.2);
    content: '';
}

.short_video_block:hover > a > .prev_short_video:before{
    opacity: 0.2;
}
Вот html:
<div class="short_video_block">
    <a href="{full-link}">
        <div class="prev_short_video">
            <img src="[xfvalue_screen_video]" alt="{title}">
        </div>
        <div class="title_short_video">
            {title limit="50"}
        </div>
    </a>
</div>

Ответа пока нет


Комментарии пользователей (3)

bek_790
23

bek_790 - 6 ноября 2015 19:03 - Юзер

width: 360px;

Замените

width: 50%;

skuchniy
30

skuchniy - 6 ноября 2015 20:10 - Юзер

В какой именно строчке?

Drol
7

64 | 16

Drol - 8 ноября 2015 21:54 - Юзер

.prev_short_video{
    width: 360px;

Чтобы комментировать - войдите или зарегистрируйтесь на сайте

Похожие вопросы