0

На полном экране все выглядит примерно так: введите сюда описание изображения. При уменьшении ширины окна браузера все выглядит так:введите сюда описание изображения помогите пожалуйста привести это все в порядок. Чтобы в полном экране "крыша домика" отображалась полностью и при уменьшении экрана можно было, хотя бы пролистнуть влево чтобы увидеть текст. спасибо

.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>

0

1 ответ 1

1

Примерно так - не знаю конечный результат

nav{
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 60px;
}

nav a{
  text-decoration: none;
  font-weight: 700;
  font-family: sans-serif;
}

.items{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 30px;
}

.items .item{
  width: 100%;
}

@media(max-width: 768px){
  h2{
    font-size: 20px;
  }
  h4{
    font-size: 14px;
  }
}
<nav>
  <a href="#">О нас</a>
  <a href="#">Цена</a>
  <a href="#">Гарантии</a>
  <a href="#">Контакты</a>
</nav>

<div class="items">
  <div class="item">
    <h2>Ремонт квартир</h2>
    <h4>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur ipsa hic, suscipit aut optio voluptatibus totam aliquam quas corrupti placeat!</h4>
  </div>
  <div class="item">
    <svg viewBox="0 0 400 250">
        <path d="M200,0 400,100 400,250 0,250 0,100" 
              fill="#B1BA5C" />
      </svg>
  </div>
</div>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.