На полном экране все выглядит примерно так: . При уменьшении ширины окна браузера все выглядит так:
помогите пожалуйста привести это все в порядок. Чтобы в полном экране "крыша домика" отображалась полностью и при уменьшении экрана можно было, хотя бы пролистнуть влево чтобы увидеть текст. спасибо
.content-about {
display: flex;
justify-content: space-around;
}
.about-title {
width: 400px;
color: white;
}
.about-title h3,
h4 {
font-weight: 400;
}
.figure-about {
height: 300px;
width: 600px;
margin: 15px 15px 0 0;
background: #B1BA5C;
position: relative;
}
.figure-about:before {
content: "";
height: 0;
width: 0;
position: absolute;
left: 0;
top: -100px;
border-bottom: 100px solid #B1BA5C;
border-left: 300px solid transparent;
border-right: 300px solid transparent;
}
<div class="about">
<div class="content-about">
<div class="row">
<div class="about-title">
<h3>Ремонт квартир</h3>
<h4>Ремонт квартир, офисов, коттеджей под ключ в Санкт-Петербурге и ЛО</h4>
</div>
</div>
<div class="row">
<div class="with-figure-about">
<div class="figure-about">
</div>
</div>
</div>
</div>
</div>