The description in the lower design must not be on the same line or at the same height as the element

I'm facing an issue with CSS regarding achieving the same height. I have a list of designs, each with a description at the bottom. While I've successfully aligned the designs vertically between portrait and landscape orientations, the problem arises when the description is too long to be on the same line as others. I am looking for a way to make the description appear flat at the top using only CSS without relying on JavaScript. Here's an image reference:

View Image

I am using Bootstrap Flex.

HTML

<div class="row">
  <div class="col-12 col-md-8 p-4 d-flex flex-column">
    <div class="my-auto">
      <img/>
    </div>
    <div class="description my-3">
    </div>
  </div>
  <div class="col-12 col-md-8 p-4 d-flex flex-column">
    <div class="my-auto">
      <img/>
    </div>
    <div class="description my-3">
    </div>
  </div>
</div>

CSS

.flex-column {
  -webkit-box-orient: vertical!important;
  -ms-flex-direction: column!important;
  flex-direction: column!important;
}
.d-flex {
  display: -webkit-box!important;
  display: -ms-flexbox!important;
  display: flex!important;
}

Please help me resolve this issue without using JavaScript. Thank you for your assistance. Apologies for any language limitations in my communication.

<!doctype html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

  <title>Same Height</title>
</head>

<body>

  <div class="container">
    <div class="row">
      <div class="col-4 p-4 d-flex flex-column border">
        <div class="my-auto">
          <img src="https://via.placeholder.com/200x400/0000FF/808080" class="w-100" alt="">
        </div>
        <div class="my-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
      </div>
      <div class="col-4 p-4 d-flex flex-column border">
        <div class="my-auto">
          <img src="https://via.placeholder.com/400x200/0000FF/808080" class="w-100" alt="">
        </div>
        <div class="my-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat repellendus, molestias animi deleniti cum.</div>
      </div>
      <div class="col-4 p-4 d-flex flex-column border">
        <div class="my-auto">
          <img src="https://via.placeholder.com/200x400/0000FF/808080" class="w-100" alt="">
        </div>
        <div class="my-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
      </div>
      <div class="col-4 p-4 d-flex flex-column border">
        <div class="my-auto">
          <img src="https://via.placeholder.com/200x400/0000FF/808080" class="w-100" alt="">
        </div>
        <div class="my-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
      </div>
      <div class="col-4 p-4 d-flex flex-column border">
        <div class="my-auto">
          <img src="https://via.placeholder.com/400x200/0000FF/808080" class="w-100" alt="">
        </div>
        <div class="my-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
      </div>
      <div class="col-4 p-4 d-flex flex-column border">
        <div class="my-auto">
          <img src="https://via.placeholder.com/200x400/0000FF/808080" class="w-100" alt="">
        </div>
        <div class="my-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
      </div>
    </div>
  </div>

</body>

</html>

htmlcssbootstrap-4

Answer №1

Take a look at this example in action. Simply add a fixed height to the my-auto class along with vertical-align: middle;, and all product descriptions will remain aligned on the same line. Remember to also include max-height: 100% for images to prevent overflowing.

I hope this solution proves useful. 

.my-auto {
  justify-content: center;
  vertical-align: middle;
  height: 300px;
  display: flex;
  align-items: center;
}
.my-auto img {
  max-height: 100%;
}
<!doctype html>
<html lang="en">
<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

  <title>Same height</title>
</head>
<body>

<div class="container">
  <div class="row">
    <div class="col-4 p-4 border">
      <div class="my-auto w-100">
        <img src="https://via.placeholder.com/200x400/0000FF/808080" class="w-100" alt="">
      </div>
      <div class="my-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit</div>
    </div>
    <div class="col-4 p-4 border">
      <div class="my-auto w-100">
        <img src="https://via.placeholder.com/400x200/0000FF/808080" class="w-100" alt="">
      </div>
      <div class="my-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat repellendus, molestias animi deleniti cum</div>
    </div>
    <div class="col-4 p-4 border">
      <div class="my-auto w-100">
        <img src="https://via.placeholder.com/200x300/0000FF/808080" class="w-100" alt="">
      </div>
      <div class="my-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit</div>
    </div>
  </div>
</div>

</body>
</html>

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

Using jQuery to move a div to a specific location on the page

Is there a way to translate the position of div x and y using Jquery that is compatible with all browsers, such as IE 7, IE8, IE9, and IE10? I have attempted the following: <div id="s1" style="-ms-transform:translate(159,430)"> hello ...

javascriptjqueryhtmlcssinternet-explorer

css Apply styles to form controls only if they are not empty

Utilizing an angularjs form, I have customized the following example to fit my code: .my-5 { margin:100px; } .form-group { position: relative; margin-bottom: 1.5rem; } .form-control-placeholder { position: a ...

htmlcss

Passing input values to a textarea in Jquery

Currently, I am attempting to transfer the value from a textbox to a textarea. However, I am struggling with how to append this new value alongside any existing content in the textarea. $('#firstnametxt').change(function () { $(& ...

jqueryhtml

CSS: the enigmatic padding of absolute positioning within a table cell

I am encountering an unusual issue while attempting to position a div element absolutely inside a table-cell. In order to achieve absolute positioning, I utilize a wrapper div element with position:relative: HTML <table> <colgroup> ...

htmlcss

Top method for establishing multiple aliases for disabled elements in CSS

Is there a way to have two different disabled states for checkboxes, one with a gray background and the other with a blue background, while maintaining the same functionality? Code within file.css .overall-example input[type=checkbox]:checked + label { ...

css

Hovering over graphics for automatic scrolling

I have successfully implemented a hover effect that scrolls down an image inside a div. However, I am facing an issue with making the scroll longer for images of varying lengths by using calc inside the transition property. Below is the code snippet that ...

csshovercss-transitionscss-animationstransition

Displaying Previously Selected Value in HTML Dropdown Menu

Using a combination of PHP and HTML, I have created an HTML table that is generated using a PHP while loop. The dropdown menu on the page displays all distinct portfolio names from my MySQL database by executing the following code: $query2 = "SELECT DISTI ...

javascriptphphtmlmysql

a pathway leading to the user's profile

I have successfully implemented a code that displays a list of people who are at level 8, which can be seen below https://i.sstatic.net/bJ9VX.png Now, I want to make it so that when a user clicks on the username of the individuals listed, they will be re ...

phphtml

Unique arrangement of hexagons in a honeycomb layout with precise centering

Currently, I am having trouble creating hexagonal blocks with content in a specific layout. My goal is to have four blocks starting with one at the top, followed by a row of two, and finishing with a row of one as shown in the image below. Unfortunately, a ...

cssresponsive-designhexagonal-tiles

Tips for ensuring the accurate retrieval of prop values by waiting for the value to be set

Encountering an issue with the .toUpperCase() method within one of my components, resulting in the following error: TypeError: Cannot read properties of undefined (reading 'toUpperCase') This problem seems to stem from a race condition in fetc ...

javascriptcssreactjsreact-nativematerial-ui

Is there a way to change an element's display to 'block'? (see more information below)

I'm having an issue with my event listener for a button that is supposed to change the css of #popUpForm. It seems to only work when I add inline css directly to #popUpForm. Is there a way to achieve this without using inline css and instead setting t ...

javascripthtmlcssdomwebpack

Alter the class following modifications to the list

https://i.stack.imgur.com/QZob0.pngIn my dual list, the data is displayed in a ul li format fetched from a JSON file. Users can move items between the two lists. However, I am facing an issue where I want to apply a property that only displays content with ...

javascriptjqueryhtmlcssajax

Suggestions for automatically adjusting the height and width of a div containing z-indexed content

I'm attempting to automatically adjust the height and width of the parent div that contains three stacked images, but the parent is not adjusting to the dimensions of the content. Even when the div and the last image are on the same z-index, it's ...

htmlcssz-index

Enhancing Tapestry Grid component column sort icons

In the Tapestry Grid components, the default column sort icons are blue and white, but if your page has a different color scheme, you may want to personalize them. How can you replace the default Tapestry Grid column sort icons with your own custom icons? ...

csstapestry

Issue with Bootstrap 4 toggle button functionality - looking for a fix

I'm encountering an issue with my website where the toggle button for the navbar is not functioning properly after I added it. Below is the code snippet for my navbar: <nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class=" ...

htmltwitter-bootstrapbootstrap-4

Display the input in the text box before making a selection from the dropdown menu

Latest Technologies: $(document).ready(function(){ $('#userID').change(function(){ $('#username').val($('#userID option:selected').data('username')); }); }); Coding in HTML: <select class="form- ...

javascriptjqueryhtmlajax

The CSS Image Gallery refuses to be centered

.imageContainer{ width: 100%; margin: 0 auto; position: relative; text-align: center; } .imageContainer img{ width: 250px; height: 250px; float: left; } .imageContainer img:hover{ opacity: 0.60; } I am having trouble gett ...

csscenter

assigning the browser's width to a variable within an scss file

Is there a way to dynamically set the browser's width as a variable? I am familiar with @media queries, but I need to calculate the browser's width for a specific purpose. I attempted using jQuery to achieve this, and it works well with a fixed ...

javascriptjquerycsssass

Can Bootstrap be used to create distinct spacing between table rows in a DataTable?

How can I achieve the look of separate table rows as shown in the image provided? I am currently using DataTables and bootstrap 5. I am looking to create visually distinct rows where the background is visible in between each row. Click here to view the i ...

htmlcssdatatablesbootstrap-5

How come the subitems of a second-level nested list do not appear when hovering over a hyperlink?

Show "News" in French when hovering over the French option. ul#topmenu li a#HyperLink:hover ul { background-color: pink; display: list-item; } <ul id="topmenu"> <li class="langHorzMenu"> <a href="#" id="HyperLink">French</ ...

htmlcss