Elevate the size of the hero section

Is there a way to increase the height of my jumbotron without adding it in the class attribute, as it would affect responsiveness? I want it to look like this, but currently, it appears as this.

Below is my code: Html:

<div class="container">
            <div class="row">
                <div class="jumbotron">
                    <div class="col-md-10">
                        <h2 class="meeting_heading">MeetingResult is dedicated to ridding the world of ineffective, under-performing and outright wasteful business meetings.</h2>
                    </div>
                    <div class="col-ms-2">
                        <button type="button" class="btn btn-default btn-lg btn-custom">Learn More</button>
                    </div>
                </div>
            </div>
        </div>

CSS:

.container 
{
    width:87%;
}
.jumbotron
{
    box-shadow: inset 0px -8px 0 rgba(0, 0, 0, 0.1);
    border-radius: 13px;
    background-color: #FAFAFA;
     min-height:300px;
}
.btn-custom
{
    width: 152px;
    background-color: #1abc9c;
    border: none;
    color:#ffffff;
    font-size: 21.994px;
    line-height: 22px;
    padding: 15px 20px 16px;
    position: relative;
    top: 13px;
    right: 4px;
}

Answer №1

Seems like everything is functioning properly.

However, there might be another scenario to consider on your end. Your jumbotron could potentially be inheriting from its parent, so you may need to apply some padding and ensure that rule is marked as important, similar to this:

    .jumbotron {
        padding: 48px 60px !important;
    }

Alternatively, you can also utilize min-height as you are already doing, for example:

    .jumbotron {
        min-height: 300px !important;
    }

This approach may help resolve your issue...!

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

Calculator built with HTML, CSS, and JavaScript

Hi there, I'm experiencing some issues with my calculator. The buttons seem to be working fine and lining up correctly, but for some reason, nothing is showing up on the monitor or getting calculated when I press the buttons. Here's the code that ...

Postpone the execution of the toggleClass function

I have a tab that, when clicked, fades in to reveal content loaded with AJAX. However, the content loads immediately upon clicking the button. I attempted to use toggleClass with delay, but it was unsuccessful. How can I effectively delay the loading of t ...

Arranging input elements horizontally

this issue is connected to this post: Flex align baseline content to input with label I am grappling with the layout of my components, specifically trying to get all inputs and buttons aligned in a row with labels above the inputs and hints below. The CSS ...

javascript popup appears twice in IE when using PHP

After testing this script on multiple browsers, an issue arises when using IE. In all other browsers, the form submission alert only appears once. However, in Internet Explorer, the alert pops up twice. What could be causing this discrepancy? <!DOCTYP ...

Steps for deactivating a button until the form has been submitted

Click here for the Fiddle and code sample: $(".addtowatchlistform").submit(function(e) { var data = $(this).serialize(); var url = $(this).attr("action"); var form = $(this); // Additional line $.post(url, data, function(data) { try { ...

Tips on how to ensure the navigation menu is the same size as its child elements in the navigation menu

I'm currently designing a navigation menu that includes a child navigation menu. My goal is to have the size of the main navigation menu match that of the child navigation menu. To achieve this, I've created three hyperlink tags followed by a di ...

The dropdown menu fails to update in Internet Explorer

Here is the URL for my website: . On this page, there are two fields - category and subcategory. When a category is selected, the corresponding subcategory should change accordingly. This functionality works smoothly in Google Chrome, however it encounte ...

Looking for assistance in personalizing a Tab slider plugin with jQuery and CSS?

Hi there! I stumbled upon this post (http://stackoverflow.com/questions/7645702/tab-slide-out-using-jquery-need-more-than-one) while experimenting with a plugin. I'm curious if anyone here knows how to integrate this plugin into a menu. My idea is to ...

Concealing a Div element without the use of Jquery or JavaScript

I have an Upper and Lower div in my HTML code. I am trying to display the Lower div only if the Upper div is present, otherwise hide it. Is there a way to achieve this using CSS without using Jquery or Javascript? Note: No modifications should be made t ...

A guide on retrieving real-time data from PHP using Ajax

Being new to Ajax, I am struggling to grasp how to retrieve changing variable values from php. Below is the code snippet that I have been working on: <?php $pfstatetext = get_mypfstate(); $cpuusage= cpu_usage(); ?> <div id="show"> <c ...

Unable to submit form using the submit button

Can anyone explain why the form won't submit in this scenario? I prefer not to use input type='Submit', but the function call seems to be working. <button onclick='submitForm()'>Save</button> function submitForm() { ...

Unable to interact with menu in Internet Explorer

I am facing an issue with my code that should create a dropdown menu when hovered on, but it is not working properly in Internet Explorer. Instead of dropping down the menu, IE pushes it to the right, making it impossible to interact with. Surprisingly, th ...

How can I adjust the border opacity in a React application?

Can we adjust the border color opacity in React when using a theme color that is imported? For example, if our CSS includes: borderBottomColor: theme.palette.primary.main and we are importing the theme with Material UI using makeStyles, is there a way to ...

Position the div to float on the right side and then have it drop below on smaller screens

I'm currently working on implementing a design effect similar to the one shown below: on my website (), but I'm struggling with getting the HTML and CSS just right. When I move the map to float up on the right side, it doesn't drop below th ...

The issue with calling Ajax on button click inside a div container is that the jQuery dialog box is

Here is the code for my custom dialog box: $("#manageGroupShow").dialog({resizable: false, draggable: false, position:['center',150], title: "Manage Group", width:"50%", modal: true, show: { effect:"drop", duration:1000, direction:"up" }, hide: ...

Dealing with a syntax error in JavaScript (Codecademy)

I have been working my way through the JavaScript course on Codeacademy and for the most part, I've been able to figure things out on my own. However, I've hit a roadblock with my code and can't seem to get it right. Here is the code I&apos ...

Steps for inserting an additional header in an Angular table

https://i.stack.imgur.com/6JI4p.png I am looking to insert an additional column above the existing ones with a colspan of 4, and it needs to remain fixed like a header column. Here is the code snippet: <div class="example-container mat-elevation-z8"> ...

Finding a jQuery DOM element without using a loop

Can the element in variable d be identified directly instead of looping through each function? Take a look at the DOM below: <!DOCTYPE html> <html lang="en"> <head> <title></title> <script src="../jquery-ui ...

Using a Second List Element in CSS Image Rollover Map with jQuery

I have been utilizing this interactive map from Wolf's website, but I am interested in incorporating a secondary list of countries alongside the existing one as the base for the script. However, due to presentation reasons, the second menu cannot resi ...

Implement a custom placeholder feature for InputNumber in Blazor

I have a question about adding a placeholder to the InputNumber component. I attempted the following code but unfortunately, it did not work as expected. //Code behind public int? Hour { get; set; } //razor page <EditForm Model=&quo ...