I am using Bootstrap 5 to make a website and I am trying to make the header image of the website responsive using media queries. I like the way it looks on desktop, laptop, and tablet viewports but on mobile, however, I am not able to get the text and button to fit well like it does in the other viewports.
This is what it looks like on desktop 
This is what it looks like on mobile
:root {
--desktop-min: 1200px;
--laptop-min: 900px;
--laptop-max: calc(var(--desktop-min) - 1px);
--tablet-min: 720px;
--tablet-max: calc(var(--laptop-min) - 1px);
--mobile-min: 300px;
--mobile-max: calc(var(--tablet-min) - 1px);
}
#navbar-color {
background-color: hsl(210, 45%, 30%);
}
.navbar-light .navbar-toggler-icon {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.navbar-light .navbar-toggler {
border: 1px solid hsl(0, 0%, 100%);
outline: none;
box-shadow: none;
}
.carousel-inner img {
width: 100%;
height: 100%;
filter: brightness(0.6);
}
.carousel-caption {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.carousel-caption h1 {
font-size: 500%;
transform: uppercase;
text-shadow: 1px 1px 15px hsl(0, 0%, 0%);
}
.carousel-caption h4 {
font-size: 200%;
font-weight: 500;
padding-bottom: 1rem;
text-shadow: 1px 1px 10px hsl(0, 0%, 0%);
}
/* .btn-primary {
background-color: hsl(18, 100%, 62%);
border-color: 1px solid hsl(18, 100%, 62%);
}
.btn-primary:hover {
background-color: hsl(18, 100%, 62%);
border-color: 1px solid hsl(18, 100%, 62%);
} */
#button {
background-color:hsl(18, 100%, 62%);
border: 1px solid hsl(18, 100%, 62%);
}
#button:hover {
background-color:hsl(24, 83%, 65%);
border: 1px solid hsl(24, 83%, 65%);
}
@media screen and (min-width: var(--laptop-min)) and (max-width: var(--laptop-max)) {
.carousel-caption {
top: 50%;
}
.carousel-caption h1 {
padding-top: 15px;
}
.carousel-caption h4 {
font-size: 140%;
font-weight: 400;
padding-bottom: .2rem;
}
#button {
font-size: 95%;
padding: 8px 14px;
}
}
@media screen and (min-width: var(--tablet-min)) and (max-width: var(--tablet-max)) {
.carousel-caption {
top: 50%;
}
.carousel-caption h1 {
font-size: 350%;
padding-top: 10px;
}
.carousel-caption h4 {
padding-bottom: .1rem;
}
.carousel-caption .btn {
font-size: 95%;
padding: 8px 14px;
}
}
@media screen and (min-width: var(--mobile-min)) and (max-width: var(--mobile-max)) {
.carousel-caption {
top: 40%;
}
.carousel-caption h1 {
font-size: 250%;
padding-top: 10px;
}
.carousel-caption h4 {
font-size: 110%;
}
.carousel-caption .btn {
font-size: 90%;
padding: 4px 8px;
}
.carousel-indicators {
display: none;
}
}<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Home | </title>
<!-- <meta name="description" content="Write an awesome description for your new site here. It will appear in your document head meta (for Google search results) and in your feed.xml site description." /> -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="stylesheet" href="../css/test17.css" />
<!-- <link rel="stylesheet" href="./css/dropdown.css" /> -->
<!-- <link rel="stylesheet" href="./css/login-modal.css"> -->
<link
rel="stylesheet"
data-purpose="Layout StyleSheet"
title="Default"
disabled
href="/css/app-937c1ff7d52fd6f78dd9322599e2b5d4.css?vsn=d"
>
<link
rel="stylesheet"
data-purpose="Layout StyleSheet"
title="Web Awesome"
href="/css/app-wa-8d95b745961f6b33ab3aa1b98a45291a.css?vsn=d"
>
<link
rel="stylesheet"
href="https://site-assets.fontawesome.com/releases/v6.4.0/css/all.css"
>
<link
rel="stylesheet"
href="https://site-assets.fontawesome.com/releases/v6.4.0/css/sharp-solid.css"
>
<link
rel="stylesheet"
href="https://site-assets.fontawesome.com/releases/v6.4.0/css/sharp-regular.css"
>
<link
rel="stylesheet"
href="https://site-assets.fontawesome.com/releases/v6.4.0/css/sharp-light.css"
>
<link rel="icon" type="image/x-icon" href="/Bootstrap-/images/favicon-32x32.png">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<!-- NAVIGATION BAR START -->
<nav class="navbar navbar-expand-lg navbar-light py-3 sticky-top" id="navbar-color">
<div class="container">
<a href="/Bootstrap-/index.html">
<img src="./src/img/logo-topnav.png" height="45" width="225" class="img-fluid"/>
</a>
<!-- TOGGLE MENU START -->
<button
type="button"
class="navbar-toggler"
data-bs-toggle="collapse"
data-bs-target="#navmenu"
>
<span class="navbar-toggler-icon">
</button>
<!-- TOGGLE MENU CLOSE -->
<!-- TOGGLE MENU START -->
<div class="collapse navbar-collapse" id="navmenu">
<ul class="navbar-nav ms-auto">
<li class="nav-item"><a href="/Bootstrap-/index.html" class="nav-link text-white" id="nav_object">Home</a></li>
<li class="nav-item"><a href="/Bootstrap-/about.html" class="nav-link text-white" id="nav_object">About</a></li>
<li class="nav-item dropdown" id="dropdown">
<a class="nav-link text-white" href="/Bootstrap-/services.html" role="button" aria-expanded="false" id="servicesDropdown">
Services
</a>
<ul class="dropdown-menu">
<!-- <li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li> -->
<!-- <li><hr class="dropdown-divider"></li> -->
<li><a class="dropdown-item text-capitalize text-white" href="/Bootstrap-/cctv.html">CCTV Services</a></li>
<li><a class="dropdown-item text-white text-capitalize" href="/Bootstrap-/datacenter.html">Datacenter Support</a></li>
<li><a class="dropdown-item text-white text-capitalize" href="/Bootstrap-/digital-signage.html">Digital Signage</a></li>
<li><a class="dropdown-item text-white text-capitalize" href="/Bootstrap-/gen-support.html">General Support</a></li>
<li><a class="dropdown-item text-white text-capitalize" href="/Bootstrap-/net-support.html">Network Support</a></li>
<li><a class="dropdown-item text-white text-capitalize" href="/Bootstrap-/pos.html">POS Services</a></li>
<li><a class="dropdown-item text-white text-capitalize" href="/Bootstrap-/telecom.html">Telecom Services</a></li>
</ul>
</li>
<li class="nav-item"><a href="/Bootstrap-/contact.html" class="nav-link text-white" id="nav_object">Contact</a></li>
<script>
// Get the Services dropdown link element
const servicesDropdown = document.getElementById('servicesDropdown');
// Redirect to the services page when the dropdown link is clicked
servicesDropdown.addEventListener('click', function(event) {
event.preventDefault(); // Prevent default link behavior
window.location.href = this.getAttribute('href');
});
// Add the hover effect on desktop devices
if (window.matchMedia('(min-width: 576px)').matches) {
// When the mouse enters the dropdown link, show the dropdown menu
servicesDropdown.addEventListener('mouseenter', function() {
this.setAttribute('aria-expanded', 'true');
this.nextElementSibling.classList.add('show');
});
// When the mouse leaves the dropdown link or the dropdown menu, hide the dropdown menu
servicesDropdown.addEventListener('mouseleave', function() {
this.setAttribute('aria-expanded', 'false');
this.nextElementSibling.classList.remove('show');
});
}
</script>
<!-- TOGGLE MENU CLOSE -->
</ul>
</div>
<!-- TOGGLE MENU CLOSE -->
</div>
</nav>
<!-- NAVIGATION BAR CLOSE -->
<!-- SHOWCASE START -->
<section>
<div id="herocarousel" class="carousel slide" data-bs-ride="carousel" >
<div class="carousel-inner">
<div class="carousel-item active c-item">
<img src="https://picsum.photos/seed/picsum/4900/3300" class="d-block w-100 c-img" alt="...">
<div class="carousel-caption ">
<h1 class="display-1 fw-bolder text-capitalize">Project___ Name_____</h1>
<h4 class=" text-uppercase" id="sub-header">Get your unique solution</h4>
<a href="/Bootstrap-/ticket-form.html" >
<button type="button"
class="btn btn-primary px-4 py-2 fs-5 "
id="button"
>
Submit a Ticket
</button>
</a>
</div>
</div>
<!-- class="bg-dark text-white text-center text-sm-start p-5 p-lg-0" -->
<!-- <div class="container">
<div class="d-flex align-items-center justify-content-center">
<div>
<h1><span class="text-primary">Project___ Name_____</span></h1>
<p class="lead py-4">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam
voluptatum, voluptate, quibusdam, quia voluptas quod quos
exercitationem quae voluptatibus doloribus quidem. Quisquam
voluptatum, voluptate, quibusdam, quia voluptas quod quos
exercitationem quae voluptatibus doloribus quidem.
</p>
<button type="button" class="btn btn-primary">Get Quote</button>
</div>
<img src="./src/img/logo-topnav.png" alt="" class="img-fluid d-none d-lg block"/>
</div> -->
</section>
<!-- SHOWCASE CLOSE -->
</body>
</html>
2
Answers
Because
.carousel-captionisposition: absolute, it doesn’t contribute to the size of its parents. You’re then usingoverflow: hiddenon.carousel-inner, which can hide content which isn’t directly contributing towards the size of the container. You can use one of these, but both together is a problem.For background image, it doesn’t continue down because it’s wide and is shrunk down by various
width: 100%rules and so there’s no more image left to display once its height runs out. For more options, perhaps it might be better to use CSSbackground-image. Or perhaps just set a background color and accept that not all of the bottom part of the page is covered by an image.Im a newbie, but to address the issue with the mobile viewport, here are a few suggestions:
Adjust Top Position of Caption: You’ve already adjusted the
topposition of the.carousel-captionelement in your media query for mobile devices. You could try further adjusting this value to find the optimal position for the caption text and button on mobile screens. Keep testing different values until you achieve the desired look.Font Sizes and Padding: In your media query for mobile, you’ve adjusted the font sizes and padding of the caption elements and button. You can continue tweaking these values to make the text and button look good on mobile devices. Keep in mind that font sizes that are too small might make the text difficult to read, so find a balance.
Button Styling: You’re adjusting the font size and padding of the button, which is great. However, you might also want to adjust the width of the button so that it doesn’t span the entire width of the viewport on mobile devices. This can make it look more visually appealing.
Carousel Indicators: You’ve hidden the carousel indicators in your mobile media query. If these indicators are not necessary on smaller screens, this is a good approach. However, make sure you test the carousel navigation thoroughly after making this change.
Testing on Actual Devices: Sometimes, testing on an actual mobile device can provide a clearer picture of how your website looks on different screen sizes. Mobile emulators and developer tools can sometimes have limitations.
Remember that responsiveness can be a bit tricky to fine-tune, and it often requires a bit of trial and error to get everything looking just right. Keep iterating and testing to achieve the desired results on all screen sizes.
*Hopes this helps you a little, buddy. Best code & wish3s.*