I am currently working on a website project using Bootstrap 5. For the header section of the site, I have incorporated a carousel from Bootstrap that includes images, text, and buttons. My main objective is to ensure that all elements within the carousel - including the image, text, and button - are responsive across various devices. Despite attempting to use media queries, I am encountering difficulties in achieving this goal.
Test.html
<!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 rel="stylesheet" href="/_bridgetown/static/css/main.c7d4dd3f1984a290e9be.css" />
...
</script>
</body>
</html>
Test.css
.c-item {
height: 90%;
}
.c-img {
height: 100%;
object-fit: cover;
filter: brightness(0.6);
}
#team-img {
height: 100%;
object-fit: cover;
}
.c-item {
height: 90%;
}
.c-img {
height: 100%;
object-fit: cover;
filter: brightness(0.6);
}
#team-img {
height: 100%;
object-fit: cover;
}<!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 rel="stylesheet" href="/_bridgetown/static/css/main.c7d4dd3f1984a290e9be.css" />
...
</body>
</html>