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. I want the text and button to be centered on the screen just like in the desktop viewport, but when I try to change the font size of the h1 and h4 tag nothing happens in the mobile media query. I also tried to apply display: none; to the h1 element so that it would only be the h4 element and the button on the screen on mobile viewports but when I tried adding display: none; nothing happened.
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%);
bottom: auto
}
.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;
/* margin-top: -1.25rem; */
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;
margin-top: -1.25rem;
}
#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;
/* margin-top: -1.25rem; */
}
.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: 50% !important;
padding-top: 5px;
}
.carousel-caption h4 {
font-size: 10%;
/* margin-top: -1.25rem; */
}
.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/3400" class="d-block w-100 c-img" alt="...">
<div class="carousel-caption ">
<h1 class="display-1 fw-bolder">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"> Solutions</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
The Bootstrap docs for the carousel componentdo not really mention the usage of HTML content inside of the carousel, but it can be done
Inside the carousel, the
.carousel-innerelement has aoverflow: hiddenproperty on it. This is how it works from Bootstrap. You will have to manually size things with a media query to prevent them from being cut off.So my question is: why are you using a carousel here at all? You only appear to have a single item in your carousel. If you don’t use a carousel here it will be much simpler and have much less code
maybe this will help you out!
you should have used the brake points, the header elements, and the button text with pixels.
here are some brake points:
300px,
600px,
768px,
992px,
1200px,
1510px,
1600px.