How can I ensure that a list of cards is 100% in height?

Can anyone assist me in setting the height of my grid cards?

I am struggling to adjust the height of my grid card list, despite setting the parent element's height as well

    <div class="desc-grid__body cards-grid">
      <ul class="cards-grid__list">
        <li class="cards-grid__item">
          <div class="cards-grid__short-card short-card">
            <p class="short-card__content">
              <span class="short-card__lable">More</span>
              <span class="short-card__title">16 years</span>
              <span class="short-card__desc">of expertise</span>
            </p>
          </div>
        </li>
        <li class="cards-grid__item">
          <div class="cards-grid__short-card short-card">
            <p class="short-card__content">
              <span class="short-card__lable">More</span>
              <span class="short-card__title">10,000</span>
              <span class="short-card__desc">daily applications
              </span>
            </p>
          </div>
        </li>
        <li class="cards-grid__item ">
          <div class="cards-grid__short-card short-card">
            <p class="short-card__content">
              <span class="short-card__lable">More</span>
              <span class="short-card__title">1,000</span>
              <span class="short-card__desc">Competent specialists</span>
            </p>
          </div>
        </li>
        <li class="cards-grid__item">
          <div class="cards-grid__short-card short-card">
            <p class="short-card__content">
              <span class="short-card__lable">More</span>
              <span class="short-card__title">24 / 7 / 365</span>
              <span class="short-card__desc">service work management</span>
            </p>
          </div>
        </li>
      </ul>
    </div>
htmlcsslistheight

Answer №1

To adjust the height, you have the option to specify it within the "li" tag or utilize the .cards-grid__list class in your code.

Answer №2

Have you attempted to set a specific height for the .cards-grid__item?

Simply add this CSS code: 

.cards-grid__item { height: 100px; background:red;}

.cards-grid__item { height: 100px; background:red;}
<div class="desc-grid__body cards-grid">
      <ul class="cards-grid__list">
        <li class="cards-grid__item">
          <div class="cards-grid__short-card short-card">
            <p class="short-card__content">
              <span class="short-card__lable">More</span>
              <span class="short-card__title">16 years</span>
              <span class="short-card__desc">of expertise</span>
            </p>
          </div>
        </li>
        <li class="cards-grid__item">
          <div class="cards-grid__short-card short-card">
            <p class="short-card__content">
              <span class="short-card__lable">More</span>
              <span class="short-card__title">10,000</span>
              <span class="short-card__desc">daily requests
              </span>
            </p>
          </div>
        </li>
        <li class="cards-grid__item ">
          <div class="cards-grid__short-card short-card">
            <p class="short-card__content">
              <span class="short-card__lable">More</span>
              <span class="short-card__title">1,000</span>
              <span class="short-card__desc">Competent specialists</span>
            </p>
          </div>
        </li>
        <li class="cards-grid__item">
          <div class="cards-grid__short-card short-card">
            <p class="short-card__content">
              <span class="short-card__lable">More</span>
              <span class="short-card__title">24 / 7 / 365</span>
              <span class="short-card__desc">service work management</span>
            </p>
          </div>
        </li>
      </ul>
    </div>

I hope this solution meets your needs.

Thank you!

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 div element with a fixed size that remains the same regardless of its content

Check out the code snippet below for displaying an image and title: <div id="eventsCollapsed" class="panel-collapse collapse" ng-controller="videoController"> <div class="panel-body"> <div ...

cssangularjstwitter-bootstraptwitter-bootstrap-3

What could be the reason for the malfunctioning toggle button on the Bootstrap navbar?

I'm having trouble with my bootstrap navbar. I've added the .sidebar-collapse class to the body tag so that when I click on the toggle button, the data should appear on the right side. However, this isn't happening. Can anyone spot what&apos ...

htmltwitter-bootstrapbootstrap-4

What is the process for accessing the data attributes of div elements and then transferring them to a cookie?

Although this question may have been answered before, I couldn't find a specific solution. Imagine I have the following div elements... <div class="listings-area"> <div itemtype="http://schema.org/Product" itemscope=""> <a class="lis ...

javascriptjqueryhtmlcss

Enhancing the appearance of CSS Tables

I need help with applying a gradient line below each row of data that I am fetching from my database and displaying in a <table>. I've been able to achieve the design using an <hr> element, as shown here: http://jsfiddle.net/ghrw3k8e/. Ho ...

phpcsshtml-table

Is there a way to activate a click event on a particular child element within a parent element?

When attempting to click on a specific descendant of an element, I located the ancestor using ng-class since it lacked an id. yes = document.querySelectorAll('[ng-controller = "inventoryController"]') Having found the desired ancestor, ...

javascripthtmlangularjs

extracting an empty value from this variable

When I click on an anchor tag using this operator, the value appears blank. I have multiple divs with the same class, so I used the .each() function, but I can't figure out where I'm going wrong. The desired output is that when I click on one of ...

javascriptjqueryhtml

Design a personalized select element with a unique background hue

https://i.stack.imgur.com/Dzifp.jpg Trying to create a navigation with col-md-9 and select tags but facing an issue where adding a background-color to the div causes the green background of the arrow to disappear. https://i.stack.imgur.com/A4P9Q.png Plea ...

htmlcss

The width property in Bootstrap is not functioning properly in .NET Core 6

I've exhausted all my options, including documentation and the last 10 stack overflow answers, but nothing seems to be working. I even tried using: <meta name="viewport" content="width=device-width, initial-scale=1"> I attem ...

htmlcssasp.net.netmodel-view-controller

Enhance the HTML content using a JavaScript function

Here is the code that I have: <label>Brand</label></br> <select name="brand" id="brand" onChange="changecat(this.value);"> <option value="" selected>Select Brand</option> <option value="A">AMD</option&g ...

javascripthtml

To add a code snippet to the right side of a paragraph using CSS, place it at the end of the

Is there a way to insert code at the end of each paragraph and have it aligned to the right on the same line as the last sentence? Update: I initially tried using float:right, but encountered an issue with vertically aligning the code with the last line ...

htmlcss

Creating a dynamic routerLink value in Angular 8 for items within an ngFor loop

I am currently attempting to route a dynamic value from the NgFor using [routerLink]. <li class="list-group-item d-flex justify-content-between align-items-center" *ngFor="let factors of factorsList"> <span>{{factors | ...

javascripthtmlangularangular-ui-routerangular-routing

Exploring the World of HTML and PHP

I've recently started learning HTML and PHP. After installing the XAMPP software on my Windows computer, I launched the Apache and MySQL servers and created an HTML file like the one below - however, the PHP code doesn't seem to be executing. Eve ...

phphtmlmysqlapachexampp

Instead of stacking neatly, the Bootstrap rows are overlapping each other

I am currently working on a webpage design using bootstrap. The layout consists of different sections, each containing a bootstrap row within a container. However, I encountered an issue where new rows are not appearing below the previous row as expected, ...

htmlcssfrontendbootstrap-5

Having trouble displaying ES6 promise value in AngularJS view

Currently, I am working on a project where I am utilizing the Pinterest JavaScript SDK to retrieve some pin data. In order to achieve this, I have created a Pinterest service with a method that is invoked in my HomeController. To fetch the response and d ...

javascripthtmlangularjsangular-promise

Troubleshooting Flexbox in Internet Explorer 11: Issue with 100% width not functioning properly within nested flex containers with a 'column'

Is there a way to ensure that an image within nested flex containers has a width of 100% in IE11, even when the container has flex-direction: column? I've tried setting the width to 100% with a max-width of calc(100% - 0.1px), but unfortunately it doe ...

htmlcssflexboxinternet-explorer-11

Present the value of an object within an array in an HTML format

I have organized an array containing information about different video games: let games = [{ title: 'Fortnite', price: 20, img: "./assets/images/Fortnite.jpg" }, { title: 'Valorant', price: 0, img: "./asse ...

javascripthtml

Is there a way to move the <hr> element closer to the content in the header section?

I am looking to move the closer to the content in the header. I attempted using position-absolute but the disappeared. This marks my inaugural project with bootstrap. <!-- Bootstrap-5 --> <link href="https://cdn.jsdelivr.net/npm/<a href="/ ...

htmlcssbootstrap-5

Unveiling the method to retrieve XML tag based on the attribute of its parent element

This snippet is a segment of XML code: <?xml version="1.0"?> <menu> <pizzas> <pizza number="0"> <title>Tomato &amp; Cheese</title> <small>550</small> <medium></medium> <large> ...

phphtmlxmlxpathattributes

"HTML Form Input Configuration Bug: Multiple Selection Fails to Return

I am currently working on a web application using express, and I am trying to create a form for adding a new product. Within this form, I have implemented a multi-select feature for choosing the categories associated with the product. Below is the code sni ...

htmlnode.jsexpress

Stop the initial expansion of the first accordion with JavaScript on page load

I have a simple accordion created using only pure javascript without jQuery and Pure CSS. Everything is functioning correctly, but the problem I am facing is that the first accordion is automatically expanded when the page loads. I have tried various metho ...

javascripthtmlcss