Я использую стандартные медиазапросы для своего проекта, они отлично работают, за исключением небольших планшетов и ландшафтного режима.Я приложил изображение, чтобы показать это.Я предполагаю, что это потому, что у меня есть пользовательские CSS для многих разделов моей страницы экс.Маржа-топ.Мой клиент попросил использовать не квадратные фоновые изображения, поэтому, чтобы центрировать текст на фоновых изображениях, мне пришлось сделать много пользовательских CSS - это сводит меня с ума, мне никогда не приходилось иметь дело с не квадратными изображениями раньше,Я попытался выровнять все в этих медиа-запросах, но это негативно сказалось на другом устройстве.
Кто-нибудь может подсказать, как это исправить?Нужно ли мне добавлять дополнительные медиа-запросы, чтобы все работало идеально?
Я только добавлю свой код медиа-запроса и код ценового столбца, потому что у меня так много кода для всего этого сайта.Я собираюсь также прикрепить рабочую ссылку к сайту.Как я уже сказал, на мобильном портрете, ipad книжной / альбомной ориентации, на рабочем столе он отлично смотрится, но на маленьком планшете или на мобильном телефоне не выравнивается.
Ссылка на сайт
// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }
// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) and (max-width: 767.98px) { ... }
// Medium devices (tablets, 768px and up)
@media (min-width: 768px) and (max-width: 991.98px) { ... }
// Large devices (desktops, 992px and up)
@media (min-width: 992px) and (max-width: 1199.98px) { ... }
// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }
/* Extra small devices (portrait phones, less than 576px)*/
@media (max-width: 575.98px) {
.intro {
text-align: center;
}
.intro1 {
padding-top: 50px;
font-size: 55px;
}
.intro2 {
font-size: 55px;
}
.intro3 {
font-size: 25px;
}
.jumbo_features {
width: 80%;
}
#img_prev {
display: none;
}
#img_next {
display: none;
}
#content4 {
margin-top: -230px;
}
.view2 {
background-position: center;
}
.price_container {
height: 100%;
width: 90%;
background-color: #fff;
}
.card {
height: 670px;
margin: 1rem;
}
.form-control {
width: 275px;
}
#content6 {
margin-top: -60px;
}
}
/*Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) and (max-width: 767.98px) {
.view {
background-repeat: no-repeat;
background-size: cover;
overflow: hidden;
width: 100%;
height: 150%;
}
.jumbo_features {
width: 45%;
}
#img_prev {
display: none;
}
#img_next {
display: none;
}
.integration {
margin-top: 250px;
}
.price_container {
background-color: inherit;
}
}
@media (min-width: 600px) and (max-width: 800px) {}
/*Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) and (max-width: 991.98px) {
.jumbo_features {
width: 80%;
}
.view2 {
background-position: center;
}
.integration {
margin-top: 240px;
}
#content4 {
margin-top: -350px;
}
.price_container {
width: 95%;
}
.card {
width: 13rem;
height: 670px;
}
}
/*Large devices (desktops, 992px and up)*/
@media (min-width: 992px) and (max-width: 1199.98px) {
.price_container {
width: 90%;
}
.integration {
margin-top: 190px;
}
}
/*Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {
.price_container {
background-color: #eae8f5;
background-size: cover;
border-radius: 30px;
height: 750px;
margin-top: 50px;
justify-content: center;
width: 80%;
}
.integration {
margin-top: 140px;
}
}
<div id="content4">
<section>
<h1 class="text-center">Pricing</h1>
<br>
<div class="container-fluid d-flex align-items-center price_container text-center">
<div class="row">
<div class="col-md-4 text-center">
<div class="card">
<div class="card-header">Educator</div>
<div class="card-body d-flex flex-column">
<img src="img/price_edu.png" class="img-fluid">
<h7 class="card-title"><b>Use Wanzeru Ed</b></h7>
<ul>
<li>FREE for ONE class</li>
<li>Matches students into ideal teams</li>
<li>Real-time feedback</li>
</ul>
<button type="button" class="btn mt-auto btn-block" style="background-color: #2F8EE1; color:#fff; bottom:5px;">Get Quotes</button>
</div>
</div>
</div>
<div class="col-md-4 text-center">
<div class="card">
<div class="card-header">Individual</div>
<div class="card-body d-flex flex-column">
<img src="img/price_indi.png" class="img-fluid">
<h7 class="card-title"><b>Hire Wanzeru to be your meeting (Find word)</b></h7>
<ul>
<li>$9.99/month</li>
<li>Schedules unlimited meetings</li>
<li>Facilitates unlimited meetings</li>
<li>Takes meeting notes</li>
<li>Assigns meeting tasks</li>
<li>Sends reminders</li>
<li>Digital badging for skills</li>
</ul>
<button type="button" class="btn mt-auto btn-block" style="background-color: #2F8EE1; color:#fff;">$9.99/ month</button>
</div>
</div>
</div>
<div class="col-md-4 text-center">
<div class="card">
<div class="card-header">Business</div>
<div class="card-body d-flex flex-column">
<img src="img/price_entur.png" class="img-fluid">
<h7 class="card-title"><b>Hire Wanzeru for your business team</b></h7>
<ul>
<li>Schedules all team meetings</li>
<li>Facilitates every meetings</li>
<li>Takes meeting notes</li>
<li>Assigns meeting tasks</li>
<li>Sends reminders</li>
<li>Digital badging for skills</li>
<li>Provides real time progress reports of each team</li>
<li>Fully compliant with each business data policy</li>
</ul>
<button type="button" class="btn mt-auto btn-block" style="background-color: #2F8EE1; color:#fff;">Get Quotes</button>
</div>
</div>
</div>
</div>
</div>
</section>