Create a dynamic text arrangement within Bootstrap's jumbotron to ensure responsiveness

I am struggling with customizing the jumbotron header on my webpage, which can be found at

The dimensions of the jumbotron are currently set to 40vmax:

.jumbotron {
    background-image:url('images/<?php echo $article_cover ?>');
    background:repeat:no-repeat;
    background-size: 100%;
    height: 35vmax;
    background-position:center center;
    color:#fff;
    text-shadow:2px 2px 4px black;
}

Despite my efforts, I have not been successful in adjusting the position of the content within the jumbotron for both desktop and mobile views. The code snippet I have experimented with so far is as follows:

.jumbotron h1,
.jumbotron .h1 {
    position:relative; top 30vmax;
}

I have tried various variations of the positioning property (fixed, absolute) as well as using margin-top but none seem to work effectively across different devices.

Additionally, I aim to create a unique background specifically for the text part similar to the example shown in this image

cssbootstrap-4

Answer №1

If you're looking for some assistance, this resource may be able to help.

https://www.example.com/css-hero-image

Here is an example of how you can style the background of text:

.h1 {
    margin: 0 auto;
    width: 100px;

    h1 {
        padding: 6px;
        display: block;
        border-radius: 30px;
        background: rgba(192,192,192,.7);
        box-sizing: border-box;
        font-size: 22px;
        line-height: 1.8;
        text-align: center;
        text-decoration: none;
        color: #fff;
        transition: all 1s ease-out;
        position: relative;
    }
}

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

Align buttons in the center of a card or container using HTML and CSS

Hi everyone, this is my first time posting so please go easy on me. I've been struggling to align the buttons at the bottom of my cards to make them look neater. I've tried using flexbox but it doesn't seem to be working. Some people have su ...

htmlcssbuttonflexbox

Modifying the border hue of Material-UI's Select Component

Here is the Select component I've created using materials-UI <FormControl variant="outlined"> <Select value={this.state.value} onChange = {this.handleChange} className={this.props.classes.select} inputProps = {{class ...

cssreactjsmaterial-ui

Why is Google's No Captcha ReCaptcha failing to function properly

Seeking assistance with a PHP issue - I have implemented the no captcha reCAPTCHA widget, but I am struggling with a code snippet I found online. Whenever I try to submit an email, I receive a prompt to check the captcha, whether I click the box or not. F ...

phphtmlcsscaptcharecaptcha

What is the best way to implement a reusable HTML navbar across multiple pages of my website?

I have incorporated Bootstrap 4 into my website design. Currently, I'm including the same navbar code on every page. However, whenever I need to update the navbar, I find myself copying and pasting the code across each page. Is there a way for me to ...

jqueryhtmlbootstrap-4navbar

React: Animate with CSS

How can I make sure that every time a new user is prepended, the first div has a CSS animation? Currently, my code only works for the first prepend and the animation does not trigger on subsequent ones. const [userList, setUserList] = useState<any> ...

cssreactjs

Steps to utilize jQuery Masonry Plugin for organizing images

Struggling to put together a straightforward image gallery that can accommodate images of different sizes, I stumbled upon masonry in my quest for a plugin that could help with that. After attempting to create a prototype of this idea using a masonry empt ...

javascriptjquerycss

Can `display:none` and `display:inline` be used to reveal a hidden element nested within another?

If I want to change the appearance of certain classes with CSS, I can do so in the following code: <ul class="productText"> <li>Thycotic Secret Server <span id="headerControl_VersionNumber" class="VersionNumber">8.8</span>< ...

jqueryhtmlcss

What is the functionality of 'min-height: 100vh' when child elements stack due to a small width?

In a parent element, I have two child elements: <div id="registration"> <div id="left-panel"></div> <div id="right-panel"></div> </div> The styling is as follows: #registration{ @include l { flex-dire ...

htmlcss

In IE8, the :last-child pseudo-class appears to be ineffective

Here is the HTML structure I am working with: <div class="footerMenu"> <ul> <li>Home</li> <li>About</li> <li>Feedback</li> <li>Contact us</li> </ul> ...

htmlcssinternet-explorer-8css-selectors

Adjust the position of an anchor tag when clicked with a fixed header

I found a similar question on stackoverflow and was able to derive my solution from there. However, I am facing a slight issue with it. In my case, I have a small fixed submenu at the top of the page. When I click on an anchor link, I want the scroll posi ...

javascriptjquerycsshtml

Timer Does Not Appear to be Counting Down

I recently added a countdown clock to my website, but I'm having an issue with it not updating in real-time unless the page is refreshed. I'm not very familiar with javascript, so I found some code online and made some modifications myself to sui ...

javascripthtmlcss

Include various categories into the div containers of the listed items within the query outcomes

Is there a way to customize div styles based on query results? I want to differentiate the styles of divs in the result list based on their content. For example: I'd like bird names in the result list to have different div styles compared to other a ...

javascriptphpjqueryhtmlcss

Tips for getting a sticky table header and including a limited number of columns, each with checkboxes or input fields

Encountering issues while trying to implement functionality with a jQuery library. One specific problem is the inability to interact with checkboxes on sticky columns, as well as difficulties clicking and typing in text fields. I am utilizing the jQuery S ...

javascriptjqueryhtmlcss

The font background color appears to be malfunctioning

body { margin: 0; background-color: white; background: linear-gradient(to right, #000000, #ffffff, #ffffff, #000000); line-height:25px; } h2{ color: black; text-align: center; display: block; font-family: 'Montserrat', san ...

htmlcssbackground-color

What is the functionality of screen readers with regards to display flex?

When creating an HTML form, it may be necessary to dynamically change the requiredness of certain fields based on the value of others. In order to visually indicate this requiredness, you might want to add an asterisk to the label preceding each required f ...

htmlcssflexboxscreen-readers

jQuery insert custom text into HTML and eliminate malfunctioning elements

Using jQuery, I have created a form where the entered text is appended to certain elements. This functionality works correctly. Additionally, I have included a remove link with each added element. When someone clicks on the remove button, it should remove ...

jqueryhtmlcss

Modification of window size using jQuery animations

Currently, I am working on creating a sidebar that slides in from the left side of the screen. To achieve this effect, I have set the menu element to float left with a width of 40% and a margin-left of -40%. However, when I try to reveal the sidebar by sw ...

javascriptjqueryhtmlcss

Is there a way to create a dropdown menu that transforms into a burger icon on smaller screens, while still housing all of my navigation items within it?

I'm currently working on a segment of my header that includes a navbar with 3 links, as well as a dropdown menu listing additional functionalities. Here is the current code I have: <div class="col-md-4 pt-4"> <nav class="navbar ...

javascripthtmlcssbootstrap-5

Incorrect column alignment in Tailwind CSS

I am working on a straightforward flexbox layout with a two-column grid setup. <div class="flex relative"> <div class="columns-2 gap-4 space-y-4"> <div class="bg-red-500 p-10">1</di ...

csstailwind-css

Unable to close expanded grid item using close button

Currently, I am working on a simple 3 column grid where each grid item consists of an image and a close button. The functionality I want to achieve is that when a grid item is clicked, the image should expand and the close button should become visible. Th ...

javascripthtmlcsscss-gridevent-listener