When viewing my website on a mobile device, the heading in the div tag is not occupying the remaining space like it does on desktop. The heading is an h4 tag inside a div tag for mobile view. If you want to check out my website in inspect mode, here is the link: enter image description here I am using Bootstrap 5.0.2 for this old project that I am working to complete.
Here is the HTML for two headings:
<div id="features" style="background-color: #E7E7E7;" class="container-middle-center-fluid">
<section style="padding: 0;">
<div class="container-middle-center py-3" style="margin-left: 0; margin-right: 0;">
<h2 class="pb-2 border-bottom text-center" style="margin-top: 48px;">Specialities</h2>
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 g-4 py-5 justify-content-center">
<div class="col d-flex align-items-center column-custom">
<img class="d-none d-lg-block" width="120px" height="auto" style="margin-right: 50px; margin-right: 50px;"
src="/img/mobile_friendly.png" alt="">
<div>
<h4 class="fw-bold mb-0 mobile-text"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
fill="currentColor" class="bi bi-phone d-lg-none mobile-icon" viewBox="0 0 16 16">
<path
d="M11 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h6zM5...
<p class="d-none d-md-block">A responsive design makes your website accessible to all users, regardless of
their device.</p>
</div>
</div>
<div class="col d-flex align-items-center column-custom">
<img class="d-none d-lg-block" width="120px" height="auto" style="margin-right: 50px; margin-right: 50px;"
src="/img/content management.png" alt="">
<div>
<h4 class="fw-bold mb-0 mobile-text"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
fill="currentColor" class="bi bi-kanban-fill mobile-icon" viewBox="0 0 16 16">
<path
d="M2.5 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h11...
<p class="d-none d-md-block">Custom WordPress theme and plugin development. Easily update content without
knowing how to code.</p>
</div>
</div>
</div>
</div>
</section>
</div>
CSS:
@media (max-width:768px) {
.mobile-text {
font-weight: 600 !important;
font-size: medium;
/* color: red; */
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
.mobile-icon {
margin-right: 10px;
color: #018673;
}
.footer-mobile-text {
display: flex !important;
justify-content: center;
}
.mobile-footer-padding {
/* padding: 0; */
/* margin: 0; */
}
}
Scripts and CSS included:
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="30525f5f44434442514070051e001e02">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1e7c71716a6d6a6c7f6e33777d71706d5e2f302f2e302a">[email protected]</a>/font/bootstrap-icons.css">
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="61030e0e15121513001121544f514f53">[email protected]</a>/dist/js/bootstrap.min.js"
integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF"
crossorigin="anonymous"></script>
In mobile view, I want the header in the div tag to be on a single line, but currently, it's not taking up the available space to the sides.