Верстаю виджет и возникла проблема, когда уменьшаю окно, рисунок виджета уменьшается, дело все в объеме текста, ширина img фиксированна, сделан блок на флексах.
.widget{
position: relative;
width: 100%;
padding-top: 65px;
padding-bottom: 65px;
border: 1px solid @border;
margin-bottom: 63px;
&__title{
font-size: 30px;
font-weight: 400;
line-height: 40px;
margin-bottom: 19px;
letter-spacing:6px;
}
&__cont{
padding-left: 61px;
padding-right: 61px;
padding-top: 26px;
width: 100%;
}
&__post{
position: relative;
width: 100%;
margin-bottom: 12px;
display: flex;
flex-direction: row;
}
&__img{
margin-right: 38px;
max-width: 114px;
width: 100%;
height: 65px;
overflow: hidden;
>a{
display: block;
}
img{
height: 100%;
}
}
&__posttitle{
line-height: 20px;
font-size: 15px;
font-weight: 400;
letter-spacing:3px;
}
&__posttitle-pos{
margin-top: -5px;
margin-bottom: 8px;
}
&__date{
color: @tags;
font-size: 15px;
font-weight: 400;
letter-spacing:3px;
}
}
<div class="widget">
<h3 class="title widget__title main-text"><span></span>LATEST POSTS</h3>
<div class="widget__cont">
<div class="widget__post">
<div class="widget__img hidden-xs "><a href=""><img src="/img/wpost1.jpg"
alt=""></a></div>
<div class="widget__about">
<a href=""><h4 class="widget__posttitle widget__posttitle-pos main-text hover__title">
Living in Los
Angeles </h4></a>
<span class="widget__date main-text">OCTOBER 16, 2016</span>
</div>
</div>
</div>
<div class="widget__cont">
<div class="widget__post">
<div class="widget__img hidden-xs "><a href=""><img src="/img/wpost2.jpg"
alt=""></a></div>
<div class="widget__about">
<a href=""><h4 class="widget__posttitle widget__posttitle-pos main-text hover__title">10
LIFE
CHANGING MOMENTS
FROM 10 YEARS AS A NOMAD
around the world </h4></a>
<span class="widget__date main-text">OCTOBER 16, 2016</span>
</div>
</div>
</div>
<div class="widget__cont">
<div class="widget__post">
<div class="widget__img hidden-xs "><a href=""><img src="/img/wpost3.jpg"
alt=""></a></div>
<div class="widget__about">
<a href=""><h4 class="widget__posttitle widget__posttitle-pos main-text hover__title">MY
GUIDE TO
ASIAN
FOOD</h4></a>
<span class="widget__date main-text">OCTOBER 16, 2016</span>
</div>
</div>
</div>
</div>
Чтобы потомок флекс-контейнера не уменьшался, ему необходимо задать свойство flex-shrink: 0
. В вашем случае, это свойство необходимо добавить блоку .widget__img
.
У вас же стоит максимальная ширина, а потом относительная. То есть по размеру родительского элемента и строится
&__img{max-width: 114px;
width: 100%;}
Надо менять на что-то типа
width: 100px;
Кофе для программистов: как напиток влияет на продуктивность кодеров?
Рекламные вывески: как привлечь внимание и увеличить продажи
Стратегії та тренди в SMM - Технології, що формують майбутнє сьогодні
Выделенный сервер, что это, для чего нужен и какие характеристики важны?
Современные решения для бизнеса: как облачные и виртуальные технологии меняют рынок
Подскажите, как то вообще возможно адаптивить виджет вк? Во время его генерации можно задавать ширину виджета, но она задается в пикселях...