Мой веб-сайт выглядит хорошо на настольном компьютере, однако мне трудно убедиться, что веб-сайт реагирует на мобильные устройства с помощью начальной загрузки 4.
Я использую пользовательские столбцы, которые я использовал ранее, и они всегда казалисьоднако в этом проекте столбцы располагаются друг над другом , а не накладываются друг на друга.
Я полагаю, что это может быть потому, что этот проект очень специфичен.Или, возможно, это потому, что у меня есть фоновые фотографии для каждой <sections> моей HTML-страницы.У меня много разделов, поэтому я приведу только несколько разделов моего HTML-кода.Если кто-нибудь может сообщить мне, если я пишу свои столбцы неправильно, я был бы очень признателен!
Пример:
Содержание раздела 4 относится к содержимому раздела 3 на мобильных устройствах.
HTML:
<!--Section 3-->
<div id="content3">
<section>
<h1 class="text-center integration">Integrating</h1>
<div class="container-fluid integration_background">
<div class="row">
<div class="col-md-6 d-flex justify-content-center">
<ul class="integrations">
<li><img src="img/g_suite.png" class="pr-4">
</li>
<li><img src="img/_slack.png" class="pl-4 pr-4">
</li>
<li><img src="img/groupme.png" class="pl-4 pr-4">
</li>
<li> <img src="img/microsoft.png" class="pl-4">
</li>
</ul>
</div>
</div>
</div>
</section>
</div>
<!--Section 4 -->
<div id="content4">
<section>
<h1 class="text-center">Pricing</h1>
<br>
<div class="container-fluid d-flex align-items-center" style="width: 75%;" id="price_container">
<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">
<h6 class="card-title">Use Wanzeru Ed</h6>
<hr>
<ul>
<li>Free for one class</li>
<li>Matches students in ideal teams</li>
<li>Real-time feedback</li>
</ul>
<button type="button" class="btn btn-block mt-auto" style="background-color: #2F8EE1; 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_entur.png" class="img-fluid">
<h6 class="card-title">Hire Wanzeru to be your meeting (Find word)</h6>
<hr>
<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 btn-block mt-auto" style="background-color: #2F8EE1;">$9.99/ month</button>
</div>
</div>
</div>
<div class="col-md-4 text-center">
<div class="card">
<div class="card-header">Entrepreneur</div>
<div class="card-body d-flex flex-column">
<img src="img/price_indi.png" class="img-fluid">
<h6 class="card-title">Hire Wanzeru for your business team</h6>
<hr>
<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 btn-block mt-auto" style="background-color: #2F8EE1;">Get Quotes</button>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
CSS:
#content3 {
background-image: url("img/back2.png");
background-size: cover;
height: 540px;
display: flex;
align-items: center;
justify-content: center;
}
.integration {
margin-top: -180px;
color: #fff;
}
.integration_background {
background-color: #fff;
text-align: center;
align-items: center;
margin-top: 30px;
padding: 10px 30px 10px 30px;
}
.vertical_line {
width: 1px;
height: 110%;
background-color: grey;
float: left;
}
#content4 {
margin-top: -120px;
}