The .wrapper CSS class is effective for adjusting the width of my bootstrap card, but it doesn't impact the

body {

padding-right: 30px;
padding-left: 30px;
padding-bottom: 30px;

background-color: #228B9D;

}

div.tron {
      padding-bottom: 40px;
    padding-right: 250px;
    padding-left: 250px;
}



.wrapper{
    width: 1000px;
    margin: 0 auto;


}

div.card-block {

padding-top: 15px;
padding-left: 15px;

}
   <div class="wrapper">
        <div class="container-fluid">
            <div class="card flex-row flex-wrap" >

             <img src="https://image.flaticon.com/icons/svg/1482/1482003.svg" alt="sop" style="background-color: #324A5E;">

        <div class="card-block">
            <h4 class="card-title">Title</h4>
            <p class="card-text">Description</p>

        </div>
        <div class="w-100"></div>
        <div class="card-footer w-100 text-muted">
             <a href="#" class="btn btn-primary">BUTTON</a>
        </div>
    </div>
        </div>
 </div>

Hello, I'm currently learning how to build websites and have encountered an issue that's puzzling me. I'm attempting to adjust the height of a card using CSS. While changing the width to 1000px works perfectly fine, setting the height to 300px doesn't seem to affect the card at all. Why is it that only the width can be modified and not the height? Please advise if further details are needed. Thank you!

htmlcssbootstrap-4

Answer №1

It seems that there may be some misalignment in the div elements on your page. I have made some adjustments and now the card-block can be resized with a proper height.

You can view the updated version here: https://codesandbox.io/s/exciting-galileo-16u87

Additionally, you don't need to use div.tron in your CSS for a class, simply use .tron instead. Let me know if this resolves the issue to your satisfaction.

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

Creating a binary tree in vanilla JavaScript and styling it with HTML and CSS

I'm facing a challenge with my homework. I am required to convert my JavaScript binary tree into HTML and CSS, strictly using vanilla JavaScript without any HTML code. I have the tree structure and a recursive function that adds all the tree elements ...

javascripthtmlcss

I am having an issue where my Bootstrap 4 col-sm-6 rows are not properly stacking on mobile devices

Currently facing issues with Bootstrap 4 as my columns are not stacking on top of each other in mobile view. I have two col-sm-6 within each row. Any guidance on how to resolve this would be greatly appreciated, thank you! Feel free to visit the website a ...

htmlcssbootstrap-4responsive

Unable to load module/controller file from Angular 1 into view/html

var app = angular.module("appModule",[]); app.controller("viewController",function($scope){ $scope.greeting = "Welcome to the future"; }); <html> <head> <script src="Scripts/script.js"></script> <script ...

javascriptjqueryhtmlangularjs

"PxToRem: A handy PostCSS plugin for converting pixel units

As a beginner in the world of Node.js and post processors for CSS, I recently took the time to install the following tools after going through multiple articles: Node.js (including npm) Gulp PostCSS Pxtorem (a PostCSS plugin for Gulp) My goal is to util ...

cssnode.jsgulppostcss

Adjust the size of the text only when there is limited space available

Is there a way to make text shrink to fit inside a container only if it's too long, but remain the same size otherwise? I'm working on a chart with keyboard commands overlaid on an image of a keyboard and want the text to adjust dynamically. Any ...

htmlfont-size

Utilizing the empty space to the right of an image in HTML

What could be causing the empty space to the right of my image? This is how the HTML file appears: ... <body> <div class="image"> <img src="image.jpg" alt="Picture here" id="image" align="middle"></img> </div> ...

htmlcssimage

The site cache appears to be deactivated, but the source of the deactivation remains unclear. Can you help identify the issue?

On my PHP website, the <head> tag in the HTML includes: <meta http-equiv="Cache-Control" content="max-age=300"/> However, when checking the headers, it shows: Cache-Control: no-store, no-cache, must-revalidate, post-check=0, pre- ch ...

phphtmlcaching

How come characteristics of one particular div element are transferring to unrelated div elements?

Recently, I created a small practice website and encountered an issue that is quite frustrating. Here's the div structure I used: <div class="work-process"> <div class="container" align="center"> <div class="col- ...

htmlcss

Can you confirm if the explanation provided is accurate in distinguishing between inline and block-level elements in HTML?

The absence of the align attribute in the font tag is due to its status as an inline element. To center text, utilize the <center> tag instead. ...

htmlblockinline

Can I increase the top margin by more than mt-5?

Seeking help to align elements on my website. I've applied mt-5 in the HTML, yet require additional margin space. Any suggestions on how to achieve this? ...

htmlcssbootstrap-4margin

Determine the aspect ratio with a constant adjustment using CSS/SCSS

I am trying to adjust the aspect ratio of a responsive div to create a square shape with an offset. I want the height to be equal to the width plus the specified offset. Here is an example of what I am attempting: .div { width: 100%; aspect-ratio: 1 / ...

htmlcsssassresponsive-designcore-web-vitals

The primary division containing two inner divisions, one centered and the other positioned to the right

I would like the layout to resemble the image provided. The div header contains two nested divs - the logo div should be centered, and the info div should be positioned to the right with some margin. ...

htmlcss

Expand the div to fit 100% width inside the Blueprint container

I am currently working on a website and considering using the Blueprint CSS framework. You can view the site I'm referencing here: http://jsfiddle.net/timkl/uaSe3/ The Blueprint framework allows for a nice 24 column grid layout. One challenge I&apos ...

cssblueprint-css

JavaScript communication between clients and servers

I am looking to develop two scripts, one for the client-side and one for the server-side. I came across a snippet that allows for asynchronous calling of JavaScript: <html> <head> </head> <body> <script> (function() { ...

javascripthtmlapi

What is the best method for displaying the toggle button for Drawer/Sidebar above the main content and appbar?

After reviewing Vatsal's suggestion, it appears that moving the toggle button above the drawer is the solution to our main issue. By taking advantage of the open state of the drawer, we can adjust the left property of the button in the toggleButton cl ...

cssreactjsmaterial-ui

Display a single image on the tablet and a distinct image on the computer

Currently, I am encountering an issue with my webpage located at . The problem lies in the right upper corner where a ribbon is located. However, when viewing the page on a tablet, the ribbon overlaps with my menu. To resolve this, I thought about displa ...

htmlcssresponsive-design

Why is Emmet's document snippet failing to include the "http-equiv='X-UA-Compatible'" meta tag?

While experimenting with the Emmet boilerplate in VS Code for HTML files, I noticed a discrepancy. Online tutorials show that there should be 3 meta tags when using Emmet, but when I try it in VS Code, I only see 2 meta tags. One meta tag seems to be missi ...

htmlvisual-studio-codeemmet

Create a border that does not inherit the opacity of the object

Check out this jsBin for reference: http://jsbin.com/uyonux/1 The hover state is working fine, but the focus state is not. I want the blue color to remain solid #13A3F7 without inheriting the opacity of .4. Is there a way to achieve this without the elem ...

csscolors

What is the process for translating HTML elements into JSX format?

I have a couple of inquiries. 1.) I am working on a basic reactjs component. How can I transform it into JSX? I want the code to follow the reactjs style. 2.) If I receive an array from the backend in this format [ '/parent-folder-1/child-folder ...

javascripthtmlreactjsjsx

Pictures that can be chosen in a fashion similar to checking off a box

I am just starting out in the world of web development and I have a specific idea in mind. I want to create images that act like checkboxes, where only one can be selected at a time. Here is an example of what I'm looking for: https://i.sstatic.net/Nu ...

javascripthtmljquerytwitter-bootstrapbootstrap-4