0

Есть вот такое элемент, не знаю, как его сверстать. Делал бэкграундом, но на более маленьком разрешении блок становится уже и стрелочка получается кривой.

Вот как надо : введите сюда описание изображения

Вот что получается при более маленьком разрешении: введите сюда описание изображения

HTML:

<div class="pdl0 col-md-4 col-md-offset-7 col-sm-4 col-sm-offset-7 col-xs-12 col-lg-4 col-lg-offset-7">
                <div class="des-prugl">
                <div class="top_pr">
                <p><b>кв. </b><span class="numb">45</span> <span class="dom">дом</span> 1 <span class="dom">этаж 1</span></p>
                                </div>
                <div class="body_pr">
        <p><b>Общая площадь - </b>100 м²</p>
        <p><b>Полезная площадь</b> - 80 м²</p>
        <p><b>Балкон - </b>100 м²</p>
        <p><b>Санузел 1 - </b>100 м²
совмещенный</p>
        <p><b>Санузел 2 - </b>100 м²
раздельный</p>
        <p><b>Отделка - </b>дизайнерская</p>
</div>
                </div>
            </div>

CSS:

section .des-prugl {
    background: url('../img/pramugl.png') no-repeat;
padding: 10px 0 325px 0;
color: #fff;
font-size: 1.188em;
}
1
  • сам этот синий блок ?
    – user33274
    19 июн 2016 в 8:56

1 ответ 1

2

Сделал так, не знаю, правильно или нет, если нет - поправьте.

section .des-prugl {
background: url('../img/pramugl.png') no-repeat **top center**;
padding: 10px 0 325px 0;
color: #fff;
font-size: 1.188em;
max-width: 365px;
margin: 0 auto;
}

Но вроде работает.

Ваш ответ

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

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