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

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


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

вопрос
Можно ли как сделать адаптацию с помощью 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
Юзер

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

width: 360px;

Замените

width: 50%;

skuchniy
Юзер

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

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

Drol
Юзер

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

.prev_short_video{
    width: 360px;

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

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

наверх