The CSS styling does not seem to be affecting the text button's appearance

I am currently creating a website using Bootstrap 5, and I'm facing an issue with making the header image responsive on mobile devices. While it looks great on desktops, laptops, and tablets, on mobile screens, the text and button alignment is off. I've tried adjusting the font size for h1 and h4 tags within the mobile media queries, but nothing seems to work as expected. I even attempted to hide the h1 element and display only the h4 element and button on mobile screens using 'display: none;', but that didn't have any effect either.

Desktop View

https://i.sstatic.net/cySkh.jpg

Mobile View

https://i.sstatic.net/q8dmb.jpg

: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)) {
    
    
    ...

htmlcssresponsive-designfrontendbootstrap-5

Answer №1

The Bootstrap documentation regarding the carousel component does not provide detailed information on incorporating HTML content within the carousel, however, it is possible to achieve

Within the carousel, the .carousel-inner element utilizes the CSS property overflow: hidden. This mechanism is inherent in Bootstrap and resizing elements manually with media queries may be necessary to prevent them from getting clipped.

Therefore, my question remains: what is the purpose of using a carousel in this scenario? It seems that you only have one item in the carousel. Ditching the carousel altogether could simplify your code significantly.

Answer №2

Here's a helpful guide for you!

: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%;
text-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%);
}

#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: 768px) and (max-width: 1200px) {
.carousel-caption {
top: 50%;
}

.carousel-caption h1 {
font-size: 50px;
padding-top: 10px;
}

.carousel-caption h4 {
padding-bottom: .1rem;
}
.carousel-caption .btn {
font-size: 20px;
padding: 8px 14px;
}
}
@media screen and (min-width: 600px) and (max-width: 768px) {
.carousel-caption {
top: 40%;
}

.carousel-caption h1 {
font-size: 30px !important;
padding-top: 5px;
}

.carousel-caption h4 {
font-size: 20px;
}

.carousel-caption .btn {
font-size: 90%;
padding: 4px 8px;
}

.carousel-indicators {
display: none;
}
}
@media screen and (min-width: 300px) and (max-width: 600px) {
.carousel-caption {
top: 30%;
}

.carousel-caption h1 {
font-size: 20px !important;
padding-top: 5px;
}

.carousel-caption h4 {
font-size: 17px;
}

.carousel-caption .btn {
font-size: 17px!important;
}

.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>

<link href="https://cdn.jsdelivr.net/npm/bootstrap@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="../css/test17.css" />


<link rel="icon" type="image/x-icon" href="/Bootstrap-/images/favicon-32x32.png">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<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>

<button
type="button"
class="navbar-toggler"
data-bs-toggle="collapse"
data-bs-target="#navmenu"
>
<span class="navbar-toggler-icon">
</button>

<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>

...
other navigation links here
...

</ul>
</div>
</nav>

<section>
<div id="herocarousel" class="carousel slide" data-bs-ride="carousel">

<div class="carousel-inner">
<div class="carousel-item active c-item">
<img src="<image-url>" 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&nbsp;a&nbsp;Ticket
</button>
</a>
</div>

...

other section content here

...

</section>

</body>
</html>

you should have used the break points, the header elements, and the button text with pixels.
here are some breakpoints:
300px,
600px,
768px,
992px,
1200px,
1510px,
1600px.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

``CSS: Styling a Rounded Div with a Clipped Scrollbar

I am attempting to contain a scrollbar within a div so that it remains within the rounded corners without overflowing. Take a look at the code snippet below to see the problem in action. Is there a way for the scrollbar to be fixed in its position, while ...

htmlcss

specific css styles only for Safari and Internet Explorer

Imagine a scenario where I have a div with the class 'x': <div class = 'x' /> This div has some CSS properties and what's interesting is that it appears differently in Safari and the latest version of IE compared to other ...

javascriptjquerycss

Establishing a primary color for all text in Vuetify

How can I set a base color for all text in a Vue + Vuetify project? I attempted to change the theme's primary color in vuetify.ts: export default new Vuetify({ theme: { themes: { light: { primary: "#E53935", }, }, }, } ...

cssvue.jscolorsthemesvuetify.js

End the connection with the HTTP Get/Request

I am currently facing some difficulties in my program where it seems to be getting stuck. I have a feeling that the issue lies either in sending or receiving the links. Despite searching for solutions online and seeking help from my professor, I'm una ...

htmlcsocketsget

Guide to Creating Reusable Components Similar to Bootstrap

Bootstrap libraries like React Bootstrap offer a convenient way to import components, such as: import Modal from '...'; It is possible to destructure Modal further into individual parts: const { Header, Title, Description } = Modal; However, ke ...

reactjsnext.jsfrontendreact-bootstrapes6-modules

The HTML5 Canvas application is currently experiencing difficulty rendering images on Internet Explorer 8 browser

I have developed an HTML5 canvas program that copies an image into a canvas object and changes the transparent background color of the image to blue. This program works correctly on Firefox and Chrome, but I am trying to get it to run on Internet Explorer ...

jqueryhtmlinternet-explorer-8html5-canvas

Cycle through the list and populate the table with the data

My attempt to clarify this explanation is my best, as articulating exactly what I am trying to achieve is quite challenging: Initially, I have a list of names: { "Items": [ { "Id": 0, "Name": "Robinson" }, ...

javascripthtmlangularjsjsonangularjs-ng-repeat

In Internet Explorer, auto margins in Flexbox do not function properly when using justify-content: center

My table has cells that can contain both icons and text, with the icons appearing to the left of the text. There are different alignment scenarios to consider: Only an icon is present: The icon should be centered Only text is present: The text should be ...

htmlcssflexboxinternet-explorer-11

Unexpected behavior occurs when attempting to run an HTML string within a Python file

After inputting the following code, I am getting a blank HTML page. Despite including an <h1> and an <a href> tag, only the <title> tag is being executed. Can anyone shed light on why this is happening and offer guidance on how to resolve ...

pythonhtmlpython-3.x

Issue with Media Queries for adjusting width not functioning correctly

I'm currently working on a JavaScript calculator project and I'm having trouble making it responsive. Specifically, when the screen size decreases, the buttons in the calculator are not displaying properly, especially the operator buttons. I woul ...

htmlcss

Issues with jQuery functionality occurring when trying to display or hide div contents on dynamically loaded AJAX content

I have encountered an issue while working on a project that involves showing or hiding a div based on the selection of a drop down value. The show/hide functionality works perfectly when implemented on the same page, but it fails when I try to do the same ...

javascriptphpjqueryhtmlajax

Showing information from a database query

Let's say we have a form that submits data to the dataprocess.php file after submission. The dataprocess.php file processes the form variables and outputs the desired results. It can be challenging to directly echo content into a specific div on a pa ...

phpjqueryhtmlsqlajax

It appears that IE 10 is having trouble displaying modals, possibly due to a compatibility issue with jQuery 1.7.1's animate function

By visiting www.carsense.com and clicking on the login link in the top-right corner, you may notice that the curtain appears but the modal itself does not display, even though it exists: If you locate id="content1" and modify the inline opacity to 1, the ...

jquerycssinternet-explorerinternet-explorer-10

Error: Unable to assign value to property 'src' because it is null

Currently, I am attempting to display a .docx file preview using react-file-viewer <FileViewer fileType={'docx'} filePath={this.state.file} //the path of the url data is stored in this.state.file id="output-frame-id" ...

javascripthtmljqueryreactjs

Utilize the Bootstrap column push-pull feature on the mobile version of

https://i.stack.imgur.com/yTBIt.png When viewing the desktop version, div A is displayed at the top of the page. However, I would like to move it to the bottom when viewing on a mobile device (col-xs). I have attempted to solve this issue myself without s ...

javascripthtmltwitter-bootstrapcss

Adjust the size of the sliding tool with images of varying dimensions

My mobile-first slider features three different types of images: tall, horizontally long, and square. I want the size of the slider to be determined by the horizontally long image and then scale and center the other images to fit its size. To achieve this, ...

javascriptjquerycsssliderresize

How to lineup social media icons across on a Tumblr blog

I managed to successfully integrate the like and tweet buttons into my blog, but I'm struggling with aligning them horizontally after each post. My goal is to position the tweet button just to the left of the facebook like button for a cleaner layout. ...

htmlcssbuttonfacebook-liketumblr

Steps for using jQuery to drag a div and drop it into another div without allowing the div to move afterwards

What is the process of dragging and dropping a div into another div using jQuery while ensuring that the div does not move after being dropped? ...

jqueryhtmldrag-and-drop

Issue with justify-content in Bootstrap 5 still unresolved

Currently working with Bootstrap 5 and have set up 4 cards. My goal is to position the second card on the left side. I've applied the class justify-content-xl-start to the card, however, it doesn't seem to be functioning as expected. I also attem ...

htmlcsstwitter-bootstrapbootstrap-5

Tips for positioning text on the left and right sides of a div in HTML styling

I am struggling with positioning two pieces of text within a div. Despite having some styling already in place, the text is currently displaying one after the other on the left-hand side. I want to position one piece of text to the left and another to the ...

javascripthtmlcssreactjs