Tips for ensuring uniform button height across all cards

I am seeking advice on how to align all the buttons in different cards, despite varying text lengths, to be in the same position at the end of each card. Here is an example of what I am aiming for. Below is my HTML and CSS code:

* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
  font-family: sans-serif;
}

body {
  background-color: #f0f0f0;
}

.card-container {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 100px;
}

.card {
  width: 325px;
  background-color: #f0f0f0;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
  margin: 20px;
}

.card img {
  width: 100%;
  height: auto;
}

.card-content {
  padding: 16px;
}

.card-content h3 {
  font-size: 28px;
  margin-bottom: 8px;
}

.card-content p {
  color: #666;
  font-size: 15px;
  line-height: 1.3;
}

.card-content .btn {
  display: inline-block;
  padding: 8px 16px;
  background-color: #333;
  text-decoration: none;
  border-radius: 4px;
  margin-top: 16px;
  color: #fff;
}
<div class="card-container">
  <div class="card">
    <img src="https://images.pexels.com/photos/1402787/pexels-photo-1402787.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" />
    <div class="card-content">
      <h3>This is title of card 1</h3>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Viverra maecenas accumsan lacus vel facilisis volutpat. Aliquam etiam erat velit scelerisque in dictum non consectetur. urus in
        massa tempor nec feugiat nisl pretium fusce id.
      </p>
      <a href="" class="btn">Read More</a>
    </div>
  </div>
  <div class="card">
    <img src="https://images.pexels.com/photos/1402787/pexels-photo-1402787.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" />
    <div class="card-content">
      <h3>This is title of card 2 and it is longer</h3>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
      </p>
      <a href="" class="btn">Read More</a>
    </div>
  </div>
  <div class="card">
    <img src="https://images.pexels.com/photos/1402787/pexels-photo-1402787.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" />
    <div class="card-content">
      <h3>This is title of card 3</h3>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Erat pellentesque adipiscing commodo elit at imperdiet dui.
      </p>
      <a href="" class="btn">Read More</a>
    </div>
  </div>

htmlcssflexbox

Answer №1

This solution should solve the issue:

Expand the snippet and run the code to view on a wider screen

 * {
      margin: 0px;
      padding: 0px;
      box-sizing: border-box;
      font-family: sans-serif;
    }

    body {
      background-color: #f0f0f0;
    }

    .card-container {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      margin-top: 100px;
      align-items: stretch; 
    }

    .card {
      display: flex; 
      flex-direction: column; 
      width: 325px;
      background-color: #f0f0f0;
      border-radius: 8px;
      overflow: hidden;
      box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
      margin: 20px;
    }

    .card img {
      width: 100%;
      height: auto;
    }

    .card-content {
      display: flex;
      flex-direction: column;
      justify-content: space-between; 
      padding: 16px;
      height: 100%; 
    }

    .card-content h3 {
      font-size: 28px;
      margin-bottom: 8px;
    }

    .card-content p {
      color: #666;
      font-size: 15px;
      line-height: 1.3;
    }

    .card-content .btn {
      display: inline-block;
      padding: 8px 16px;
      background-color: #333;
      text-decoration: none;
      border-radius: 4px;
      color: #fff;
    }
<body>
  <div class="card-container">
    <div class="card">
      <img src="https://images.pexels.com/photos/1402787/pexels-photo-1402787.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" />
      <div class="card-content">
        <div>
          <h3>This is the title of Card 1</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Viverra maecenas accumsan lacus vel facilisis volutpat. Aliquam etiam erat velit scelerisque in dictum non consectetur. Curus in massa tempor nec feugiat nisl pretium fusce id.</p>
        </div>
        <a href="" class="btn">Read More</a>
      </div>
    </div>
    <div class="card">
      <img src="https://images.pexels.com/photos/1402787/pexels-photo-1402787.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" />
      <div class="card-content">
        <div>
          <h3>This is the title of Card 2 which is longer</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
        <a href="" class="btn">Read More</a>
      </div>
    </div>
    <div class="card">
      <img src="https://images.pexels.com/photos/1402787/pexels-photo-1402787.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" />
      <div class="card-content">
        <div>
          <h3>This is the title of Card 3</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Erat pellentesque adipiscing commodo elit at imperdiet dui.</p>
        </div>
        <a href="" class="btn">Read More</a>
      </div>
    </div>
  </div>
</body>

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

jQuery receiving improperly formatted HTML from method call

One issue I am facing involves a jQuery Ajax method that anticipates receiving HTML as the return. The JavaScript function's URL leads to a JsonResult method within ASP.NET MVC. To construct the HTML, I am utilizing StringBuilder and checking it in Vi ...

c#jqueryhtmlasp.net-mvc-3decode

"Creating a cohesive design: Using CSS to ensure the navigation background complements

I am working on a project with a horizontal navbar that I want to stay fixed while scrolling. The main window has different colored divs as you scroll down, and I would like the navbar to match the image of the main div while scrolling, creating a looping ...

javascriptjqueryhtmlcss

A guide to exporting a PDF in A4 size landscape mode with jspdf

As a novice in UI development, I am currently trying to export HTML content to PDF using the JSPDF library. However, I have encountered difficulties in generating the PDF in A4 size landscape mode. The HTML code includes data with charts (canvasjs/chartjs) ...

javascripthtmlcssjspdf

What is the best way to save a PDF from within a frame using JavaScript and an HTML5 <embed> tag?

I'm looking for assistance with a script for my website that dynamically generates a PDF after the user makes selections in one of the frames. The website uses the HTML5 tag to display the PDF file. Can anyone provide guidance on a script that can: ...

javascriptioshtmlpdf

The functionality of two-way data binding seems to be failing when it comes to interacting with Knock

I am currently working on a piece of code that consists of two main functions. When 'Add more' is clicked, a new value is added to the observable array and a new text box is displayed on the UI. Upon clicking Save, the values in the text boxes ...

javascripthtmlmvvmdata-bindingknockout.js

CSS background image referencing in React to the public folder's path

I am currently working on a project using Create-React-App and I am trying to set a background image for my header section. Here is how I'm attempting to do it: background-image: url('~/Screenshot_11.png'); However, I encountered an error w ...

htmlcssjsonreactjs

Is there a CSS rule that can alter the appearance of links once they have been clicked on a different webpage?

Just starting out here. Imagine I have 4 distinct links leading to the same webpage - is there a way to modify the properties of the destination page depending on which link was clicked? For instance, clicking on link1 changes the background color of the d ...

javascripthtmlcssfrontend

Troubleshooting problem with ion-input in Ionic 3 regarding the keyboard issue

Issue with Keyboard Overlaying Button In my ionic3 app, I am facing an issue where the keyboard overlaps the "Registrarse" button when it is open, as shown in the image. The button is positioned at the bottom of the ion-content using CSS rules such as pos ...

htmlcssangularionic3

Incorporating information collected from a modal form into a table using vue.js

insert code hereThis single page application allows users to input data into a modal, which is then automatically added to a table on the main page. var modal = document.getElementById('modalAdd'); var modalBtn = document.getElementById(' ...

javascripthtmlvue.js

Tips for updating the chosen value with jquery or javascript

I am facing a situation where I need to change the selected option in a dropdown menu using a function triggered onClick later in the application. <select id="myselect"> <option value=aa>aa</option> <option value=bb>bb</option&g ...

javascriptjqueryhtml

Ways to transition to an iframe window

I am having difficulty selecting an iframe popup window as it is not coming into focus. Below is the image of the popup window along with the button I am attempting to click: https://i.stack.imgur.com/VzkOX.png This is the code snippet that I have been ...

pythonhtmlseleniumselenium-webdriver

The end of the /if in the small template system fails to correctly detect the desired condition

If I write the following line on its own, he cuts it without any reason. So...: Greetings, I'm in need of assistance regarding an issue that is currently beyond my understanding. I'm facing a challenge with a small TPL-System which requires so ...

phphtmlregex

Tips for resolving a flickering issue that occurs when switching to an input field with our default value / placeholder plugin

In the realm of web development, numerous plugins cater to the implementation of HTML5's placeholder attribute in older browsers. The plugin we have opted for can be found here. Unlike some other alternatives, this particular plugin, with a few modif ...

javascriptjqueryhtmlplaceholder

Navigation bar links refusing to decrease in size

I am encountering an issue with the navigation bar on my website. When I reduce the size of the browser tab, the text remains the same size while the logo shrinks and eventually disappears. How can I ensure that everything scales down proportionally? Pleas ...

htmlcssimagenavbar

Nested Tables in JavaScript: Creating Tables within Tables

Recently, I have been analyzing student data and noticed a recurring structure. While preparing to present information on student performance within the discipline, I also became interested in showcasing a history of new students. It was suggested that hav ...

javascriptcsstreeviewsyncfusiontreetable

Which is the preferable option for creating a circular daily planner: canvas or SVG?

As a novice programmer delving into the world of coding (or at least hoping to), I have a question regarding graphic tools in html5 for my latest project. My goal is to create a planner app using electron, with the unique twist that the planner form sho ...

javascripthtmlcanvassvgelectron

Issues arise with Highcharts Sankey chart failing to display all data when the font size for the series is increased

I am currently working with a simple sankey chart in Highcharts. Everything is functioning correctly with the sample data I have implemented, except for one issue - when I increase the font size of the data labels, not all the data is displayed. The info ...

javascripthtmlhighcharts

Tips on completing landing page animations and displaying the main page of a website by utilizing React JavaScript

https://i.stack.imgur.com/M4VgY.pngIs there a way to stop the landing page animation after 2-3 seconds and show the main page instead? Can I achieve this by using setTimeOut function in JavaScript? [ export default Loader; ...

javascripthtmlcssreactjs

Invoking a nested function within an array

I need to trigger a function with a button click. The function I want to call is nested within another function, which is part of an array. demo = { volej: function(param) { (new initChartist).users(param); }, initPickColor: function(){ ...

javascripthtml

The process of retrieving CSS attributes from a control found by XPath using Selenium IDE

During my Selenium IDE script execution, I am looking to identify and handle an error state. This specific error state is visually highlighted on the page with a select control changing its background color to a light shade of red. The xpath for the selec ...

cssxpathselenium-ide