Не получается адаптив
подскажите плиз знающие люди как сделать адаптивный блок. Как то криво и ужасно у меня получается, куча мета и всеравно все разлазится и не держится кучи. Это сложность макета или отсутствие знаний. Мне кажется что есть способы сверстать проще, буду рад любой инфе.
.about
margin-top: -35%
//padding-bottom: 5px
margin-bottom: -10%
@media ( min-height: 800px )
margin-top: -35%
@media ( min-width: 650px )
margin-top: -25%
.container
position: relative
display: flex
flex-direction: column
z-index: 10
@media ( min-width: 992px )
flex-direction: row
justify-content: space-between
.section-title
margin-bottom: 30%
h2
font-size: 26px
text-align: center
@media ( min-width: 768px )
font-size: 36px
.about-text
@media ( min-width: 992px )
margin-left: 30%
h3
font-weight: 700
font-size: 34px
margin-bottom: 30px
color: #bb0f0f
p
margin-bottom: 30px
.squares
display: flex
justify-content: center
.color-square-price
margin-left: 53%
position: absolute
top: 5%
width: 250px
height: 35%
background-color: #bb0f0f
box-shadow: #00000065 0 0 10px 5px
@media ( min-width: 768px )
margin-top: 15%
@media ( min-width: 992px )
margin-left: -93%
margin-top: 10%
height: 75%
.price-square
position: absolute
width: 100%
height: 90px
background-color: #262626
box-shadow: #0000008f 0 0 10px 5px
margin-top: 10%
//margin-left: 2%
z-index: 2
@media ( min-width: 768px )
height: 120px
@media ( min-width: 992px )
margin-left: -72%
margin-top: 10%
width: 40%
.price_square_title
font-size: 14px
font-weight: 700
margin: 0
padding-top: 15px
color: #bb0f0f
@media ( min-width: 768px )
font-size: 26px
.price_square_price
font-size: 22px
font-weight: 900
margin-bottom: 20px
color: #bb0f0f
@media ( min-width: 768px )
font-size: 34px
.price-table
position: absolute
margin-top: 32%
margin-left: 5%
width: 90%
height: 21%
background-color: #000000
box-shadow: #000000 0 0 10px 5px
z-index: 1
@media ( min-width: 400px )
margin-top: 29%
@media ( min-width: 480px )
margin-top: 26%
@media ( min-width: 768px )
height: 27%
thead
background-color: #323131
th
color: #fff
font-size: 18px
@media ( min-width: 768px )
font-size: 24px
tbody
background-color: #262626
td, a
color: #fff
&:hover
color: #bb0f0f
@media ( min-width: 768px )
font-size: 22px
.table-price
color: #ffffff
font-size: 14px
font-weight: 700
@media ( min-width: 768px )
font-size: 26px
.go-to-shop
color: #bb0f0f
font-size: 18px
font-weight: 700
text-shadow: 0 0 2px #000000
@media ( min-width: 768px )
font-size: 26px
i
margin-left: 5px
font-size: 28px
@media ( min-width: 768px )
font-size: 34px
.icon-boxes
margin-top: 150%
@media screen and ( min-height: 800px )
margin-top: 155%
@media ( min-width: 340px )
margin-top: 180%
@media ( min-width: 370px )
margin-top: 160%
@media screen and ( min-width: 425px )
margin-top: 140%
@media screen and ( min-width: 525px )
margin-top: 110%
@media screen and ( min-width: 992px )
margin-top: 15%
margin-left: 10%
@media screen and ( min-width: 1200px )
margin-top: 25%
.icon-box
margin-top: 5%
span
color: #bb0f0f
text-shadow: 0 0 2px #000000
font-size: 18px
font-weight: 700
.square
margin-bottom: 20px
padding-bottom: 30px
background: #252525
i
font-size: 60px
color: #bb0f0f
margin: 0 0 10px 8%
text-shadow: 0px 0px 2px #000000
h4
font-size: 22px
font-weight: 700
margin: 0 0 10px 8%
text-shadow: 0px 0px 2px #000000
p
font-size: 16px
color: #ffffff
margin-left: 8%
text-shadow: 0px 0px 2px #000000
i
margin-left: 10px
font-size: 16px
color: #bb0f0f
text-shadow: 0px 0px 2px #000000
.price-table
a
color: #fff
i
font-size: 20px
color: #bb0f0f<section id="about" class="about">
<div class="container d-lg-flex flex-lg-row" data-aos="zoom-out" data-aos-delay="100">
<div class="section-title">
<h2>Товари та послуги</h2>
</div>
<div class="row">
<div class="content">
<div>
<div class="box-squares">
<div class="squares">
<div class="price-table">
<table class="table">
<thead>
<tr>
<th scope="col"><i class="bi bi-record-circle-fill"></i></th>
<th scope="col">Найменування</th>
<th scope="col"></th>
<th scope="col">Ціна</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row"><a href="shop/trina650.html"><i class="bi bi-eye-fill"></i></a></th>
<td colspan="2"><a href="shop/trina650.html">Фотомодулі Trina Solar 650W</a></td>
<td class="table-price"><a href="shop/trina650.html">$ 251</td>
</tr>
<tr>
<th scope="row"><a href="shop/solaredge30.html"><i class="bi bi-eye-fill"></i></a></th>
<td colspan="2"><a href="shop/solaredge30.html">Інвертор Solar Edge SE30K</a></td>
<td class="table-price"><a href="shop/solaredge30.html">€ 2287</a></td>
</tr>
<tr>
<th scope="row"><a href="shop/jinko530.html"><i class="bi bi-eye-fill"></i></a></th>
<td colspan="2"><a href="shop/jinko530.html">Фотомодулі Jinko Solar 530W</a></td>
<td class="table-price"><a href="shop/jinko530.html">$ 212</a></td>
</tr>
<tr>
<th scope="row"><a href="shop/solis30.html"><i class="bi bi-eye-fill"></i></a></th>
<td colspan="2"><a href="shop/solis30.html">Інвертор Solis GCI-30K-5G</a></td>
<td class="table-price"><a href="shop/solis30.html">$ 2100</a></td>
</tr>
<tr>
<th scope="row"><a href="shop/canadian490.html"><i class="bi bi-eye-fill"></i></a></th>
<td colspan="2"><a href="shop/canadian490.html">Canadian Solar 490W</a></td>
<td class="table-price"><a href="shop/canadian490.html">$ 196</a></td>
</tr>
<tr>
<th scope="row"><a href="shop/shop.html"><i class="bi bi-basket3-fill"></i></a></th>
<td colspan="2"><a class="go-to-shop" href="shop/shop.html">Перейти в магазин</a></td>
<td class="table-price"><a href="shop/shop.html"><i class="bi bi-basket3-fill"></i></a></td>
</tr>
</tbody>
</table>
</div>
<div class="price-square d-flex justify-content-around">
<div>
<p class="price_square_title"><a href="shop/shop.html#station10k">СEC 10 кВт</a></p>
<p class="price_square_price"><a class="text-white" href="shop/shop.html#station10k">$6 562</a></p>
</div>
<div>
<p class="price_square_title"><a href="shop/shop.html#station20k">СEC 20 кВт</a></p>
<p class="price_square_price"><a href="shop/shop.html#station20k">$11 558</a></p>
</div>
<div>
<p class="price_square_title"><a href="shop/shop.html#station30k">СEC 30 кВт</a></p>
<p class="price_square_price"><a href="shop/shop.html#station30k">$16 662</a></p>
</div>
</div>
<div class="color-square-price"></div>
</div>
</div>
</div>
</div>
<div class="about-text col-xl-7 d-flex align-items-stretch">
<div class="icon-boxes d-flex flex-column justify-content-center">
<div class="row no-gutters">
<div class="col-md-8 icon-box" data-aos="fade-up" data-aos-delay="100">
<i class="bi bi-plug"></i>
<h4>Монтаж та підключення сонячних електростанцій</h4>
<p>Встановити якісно та в зазначений термін - кредо наших спеціалістів<br><a href=""><span>Детальна інформація</span><i class="bi bi-chevron-double-right"></i></a></p>
</div>
<div class="col-md-6 icon-box square" data-aos="fade-up" data-aos-delay="200">
<i class="bi bi-thermometer-sun"></i>
<h4>Монтаж ситем для нагріву води</h4>
<p>Змонтуємо систему для нагріву води в басейні, яка не використовує газ, дрова тощо<br><a href=""><span>Детальна інформація</span><i class="bi bi-chevron-double-right"></i></a></p>
</div>
<div class="col-md-6 icon-box" data-aos="fade-up" data-aos-delay="300">
<i class="bi bi-pencil-square"></i>
<h4>Оформлення зеленого тарифу</h4>
<p>Наші юристи візьмуть на себе всі складнощі пов'язані з оформленням даної послуги<br><a href=""><span>Детальна інформація</span><i class="bi bi-chevron-double-right"></i></a></p>
</div>
<div class="col-md-6 icon-box square" data-aos="fade-up" data-aos-delay="400">
<i class="bi bi-tools"></i>
<h4>Сервісне обслуговування та підтримка</h4>
<p>Перевіримо і настороємо, а в разі несправності відремонтуємо вашу СЕС<br><a href=""><span>Детальна інформація</span><i class="bi bi-chevron-double-right"></i></a></p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Кінець Товари та послуги -->