What is the best way to ensure that the columns are the same height, regardless of the varying content they contain

Visit my CodePen

For this particular layout, I need to use only CSS. The columns are structured like so:

<div class="col-md-12 no-border no-padding">
  <h2 class="heading upper align-center">Headline</h2>
  <p class="subheading lower align-center">Ensure the first impression is incredible</p>
  <div class="help-link align-center upper margin-b-5">
    <p class="mini-help">Need assistance? Check out this video&nbsp;&nbsp;
    <div class="help">
      <div class="hvr-grow"><i class="icon-camrecorder"></i></div>
    </div>
    <p class="mini-help upper align-center margin b-5">&nbsp;&nbsp;quick video demonstration.</p>
  </div>
</div>
htmlcss

Answer №1

It appears that you have successfully utilized the .row-eq-height class to ensure all columns have equal heights. However, it seems you overlooked the presence of another .col-md-12 within each column, which adjusts its width based on the content inside. To resolve this, simply apply height:100% to make it match the parent's height instead!

Check out Codepen Demo

Update in CSS:

.headlines .row-eq-height > div > .col-md-12{
  height:100%;
}

Answer №2

Although this question has been answered before, I am sticking with my original response.

I made some adjustments by introducing additional selectors and flex rules to ensure that all boxes are the same height when displayed in a row. You can view the updated code on this link.

/* UPDATED CSS */

div.row,
.row > div {
  display: flex;
  flex-wrap: wrap;
  flex: 1 0 auto;
}
.row > div {
  flex-flow: column;
  flex: 1 0 auto;
  margin-bottom: 0;
}
.row > div > div {
  flex: 1 1 50%;
}

.multi-summ.align-center.bcolor-white {
  margin-bottom: 2rem;
}

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

Is it possible to add data in MongoDB without specifying a field name?

I have a couple of queries that revolve around the same concept: If I want to insert a new 'row' in MongoDB, can I do so by specifying the order of the fields? For instance, if my collection looks like items = { { name: "John", age: "28" ...

javascripthtmlmongodbreactjsmeteor

Adjust the position of an image in both the x and y axes based on the mouse hover location using jQuery

I am attempting to develop a unique interactive experience where an image placed within a container extends beyond its boundaries. The concept involves moving the image in the opposite direction of my mouse as I hover over the container. The speed and inte ...

jquerycssjquery-pluginshover

Tips for duplicating specific div elements

Is there a way to create copies of selected divs within the same panel using a Javascript report designer? I attempted to achieve this by using the following code snippet: function DesignerClone() { $(".ui-selected").each(function () { va ...

javascriptjqueryhtmljquery-uiclone

The Failure of window.pushState in HTML 5 History

Looking to implement ajax loading for updating center content and URL without refreshing the page. Everything seems to be working fine except for the history management. It appears that window.pushState is not properly recording URLs or the popstate even ...

javascriptjsonhtmljquerybrowser-history

Emphasize a specific portion of the text

While developing a project similar to Google Search using React.js and GoogleAPI, an issue arose. For instance, when searching "tea" on Google, the results display "Searches related to tea" at the bottom. The term "tea" appears in bold. How can this be imp ...

htmlcssreactjsgoogle-api

Exploring the Information Within HTML Forms

When my HTML form sends data to the server, it looks like this: { r1: [ '1', '2', '3' ], r2: [ 'Top', 'Greg', 'Andy' ], r3: [ 'validuser', 'invaliduser', 'validuser&a ...

javascripthtmljson

What could be causing the 404 Ajax not found error in my script?

I'm facing an issue with my code. When I try to run it, I encounter the following error: 404 (Not Found) while using the get method. Here is my html code snippet. <html> <head> <title>Issue</title> <meta charset= ...

javascriptphphtmlajax

The text element does not line up with the icons

As I'm working on creating my first account page header, I've run into an issue with some of the icons not aligning perfectly with the text. While advanced developers may find this task simple, as a beginner, I could really use some advice on how ...

htmlcss

The background image is failing to display

I am currently working on a subpage for my website that includes a navigation bar and footer. I am looking to add a background image behind the navigation bar, similar to this design. https://i.stack.imgur.com/j6fDZ.jpg After trying various methods, I at ...

htmlcsstwitter-bootstrap-3

How come the max-width property is not functioning properly on tables in Internet Explorer 7?

Is there a reason why the "max-width" property does not seem to have any effect on tables in Internet Explorer 7? While it works fine on other elements, when applied to a table, the max-width rule is completely ignored. <!DOCTYPE html PUBLIC "-//W3C//D ...

htmlcsshtml-table

Effective ways to position images within a card alongside a changing title

I have a requirement for displaying multiple cards with dynamic titles fetched from the backend. The challenge is to align images in a row regardless of the title length, ensuring alignment based on the longest title. Below is an illustration of what I am ...

javascripthtmlcsssass

Generating an app without using the Jade template engine with Express

Interested in creating an express skeleton using the express generator method. Here are the steps: $ npm install express-generator -g But it tends to add a lot of automatic jade files, which can be overwhelming. Is there a way to eliminate those jade fi ...

htmlnode.jsexpresspug

Transition/transform/translate3d in CSS3 may lead to significant flickering on the initial or final "frame" of the transition (specifically on an iPad)

Hello everyone, I am currently developing a web application specifically for the iPad and I have implemented a CSS3 transition to animate a div, moving it from left to right. Here is the structure of my class: .mover { -webkit-transition:all 0.4s ea ...

jqueryanimationcss

Height not being generated by Div element

I am encountering an issue with a div element that contains an h2 and three nested div elements. Despite not explicitly setting a height for the container div, it is not expanding to accommodate the varying heights of the inner divs. This problem is causin ...

csshtmlheight

Angular List Selector: A versatile multiple selection component with a stylish list design

I'm in need of a select component similar to the one shown in The issue is that Material Angular doesn't have this specific component, so I opted to use the default HTML select inside my component. Everything was working fine until I tried to de ...

htmlangularangular-material

Disable body scrolling on mobile devices in native browsers

When using the native browser on Samsung Galaxy S5 / S6, the following CSS code: body { overflow: hidden; } does not successfully prevent the body from scrolling. Is there a way to work around this issue? Edit: As mentioned below, one workaround is t ...

javascriptandroidjqueryhtmlcss

Issue with JavaScript function loading website homepage solely is functioning only for the first time

I am in the process of creating my own personal website. To ensure seamless navigation, I added a "home" button that, when clicked, triggers a JavaScript function called loadhomepage() to load the homepage. While this function works perfectly upon initial ...

javascriptjqueryhtmlcss

Is there a way for me to modify this carousel so that it only stops when a user hovers over one of the boxes?

I am currently working to modify some existing code to fit my website concept. One aspect I am struggling with is how to make the 'pause' function activate only when a user hovers over one of the li items, preventing the carousel from looping end ...

javascriptjquerycsscarousel

Assign a CSS class to a specific option within a SelectField in a WTForms form

Could someone explain the process of assigning a CSS class to the choices values? I am looking to customize the background of each choice with a small image. How can this be done using wtforms and CSS? class RegisterForm(Form): username = TextField( ...

pythoncssflaskwtformsflask-wtforms

Is there a way to set up an automatic pop-up for this?

Experience this code function AutoPopup() { setTimeout(function () { document.getElementById('ac-wrapper').style.display = "block"; }, 5000); } #ac-wrapper { position: fixed; top: 0; left: 0; width: 100%; height: 100%; back ...

javascripthtmlcsspopup