Сверстал страничку. На Хроме, Опере, ФФ отображается норм. А вот в Safari этот блок растягивает. У меня нету техники apple что бы залезть в консоль. Может кто-нибудь поможет? Префиксы вроде бы на месте.Вот как в остальных браузерах и в Safari
<div class="container">
<main class="3d-print-pages">
<section class="price-section padding-left">
<div class="price-section__call">
<h2 class="price-section__text-heading">Стоимость печати рассчитывается следующим образом:</h2>
<div class="price-section-text-wrap">
<p class="price-section__text-price-strong"><strong>Цена 1 грамма пластика (ABS, PLA, PETG) - 50 копеек.</strong>
</p>
<p class="price-section__text-price-strong-after">При заказе большой партии изделий, возможно снижение цены. Обсуждается отдельно для каждого проекта.
</p>
</div>
<div class="price-section__wrap">
<div class="call-specialist_img">
</div>
<button class="call-specialist__btn"><a class="call-specialist__link" href="#">Запросить расчёт услуги</a></button>
</div>
</div>
<img class="price-section__backgr-img" src="https://igo3d.by/images/companies/1/pages-3d-print/img/price-section/price-section.png" alt="coils of plastic for 3d printing">
</section>
</main>
</div>
.container {
max-width: 1200px;
height: 100%;
margin: 0 auto;
padding: 0 20px;
font-size: 14px;
background: white;
font-family: 'Open Sans', sans-serif;
}
:root {
--yellow-color: #f2a501;
--white-color: #ffffff;
--black-color: #000000;
--dark-blue-color: #40a2ed;
--light-blue-color: #96d2ff;
--light-light-blue-color: #dff7fb;
--font-size-14: 14px;
--font-size-16: 16px;
--font-size-22: 22px;
--font-size-24: 24px;
--font-size-mob-vers-big: 1.3rem;
--font-size-mob-vers-sml: 1.1rem;
--padding-top: 50px;
--padding-text-header-after-modelling: 30px;
--padding-top-h2: 50px;
--padding-bottom-h2: 20px;
--padding-bottom-after-h2: 30px;
--padding-bottom-section: 50px;
}
img {
max-width: 100%;
height: auto;
-o-object-fit: cover;
object-fit: cover;
}
.padding-left {
padding-left: 67px;
}
.call-specialist__wrap {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
max-width: 460px;
margin-left: 10%;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.call-specialist_img {
border-radius: 50%;
background: center/cover url("https://igo3d.by/images/companies/1/pages-3d-print/img/call-specialist/call-girl.png?1629295202321");
-ms-flex-preferred-size: 133px;
flex-basis: 133px;
min-height: 133px;
max-width: 133px;
min-width: 133px;
margin-bottom: 15px;
}
.call-specialist__btn {
padding: 20px 13px;
background-color: var(--yellow-color);
border-radius: 10px;
border: none;
cursor: pointer;
color: var(--white-color);
margin-left: 30px;
}
.call-specialist__link {
color: inherit;
text-decoration: none;
color: var(--white-color);
}
.call-specialist__link:hover {
color: var(--white-color);
}
.call-specialist__btn:hover {
-webkit-box-shadow: 0 0 0 2px #D2973D inset, 0 0 0 4px white inset;
box-shadow: 0 0 0 2px #D2973D inset, 0 0 0 4px white inset;
-webkit-transition: .4s;
-o-transition: .4s;
transition: .4s;
}
.price-section {
display: -ms-grid;
display: --webkit-box-grid;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(264px, 1fr));
-ms-grid-rows: 1fr;
-webkit-grid-rows: 1fr;
grid-rows: 1fr;
grid-template-rows: 1fr;
background-color: var(--dark-blue-color);
}
.price-section__wrap {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
display: -ms-flexbox;
display: -webkit-box-flexbox;
display: flex;
-ms-flex-wrap: wrap;
-webkit-box-wrap: wrap;
flex-wrap: wrap;
padding: 60px 0 60px 0;
}
.price-section-text-wrap {
max-width: 63%;
font-size: var(--font-size-16);
margin: 0;
text-align: justify;
}
.price-section__text-price-strong {
margin: 60px 0 0 0;
}
.price-section__text-price,
.price-section__text-price-strong,
.price-section__text-price-strong-after {
color: var(--white-color);
font-size: var(--font-size-16);
}
.price-section__text-heading {
padding-top: 55px;
font-size: var(--font-size-24);
text-transform: uppercase;
font-weight: 900;
color: var(--white-color);
}
.price-section__backgr-img {
min-height: 100%;
}
Тут вот живой код https://codepen.io/menist/pen/QWwojvy?editors=1010
