[CSS] Block DIV with same height, no matter the resolution!

Store Design
1

Hello,

I want my blocks to have the same height regardless of the desktop resolution.

Currently, I have an alignment with respect to the top of each block, and this one has its height modified according to the content of the block (example we see that the 4th block is longer than the others)

Sans_titre.png
Sans_titre.png1178×791 129 KB

After searching the forum, I applied the following code.

@media screen and (min-width: 768px) {
  .flexGrid.gridAlignTop.centerColumns {
    display: flex !important;
  }

  .grid_html_color.oneQuarter.flexItem.grid_sections {
    grid-auto-rows: 1fr !important;
    grid-template-rows: 1fr !important;
    grid-template-columns: 1fr !important;
  }
}

.flexGrid.gridAlignTop.centerColumns being the master elements of the 4 div blocks.

But without success.

Is this a problem with the CSS properties that I’m unfamiliar with, or is it just my selector that is wrong?

Thanks in advance for your clarifications!

2

@PascalDegut
Hello,
Can You Please Share Your Store URL?
I Will Check and Provide a Proper Solution

Or Try THis Code

.grid_html_color.oneQuarter.flexItem.grid_sections {
min Height: 500px;
}

Add this code for Your Theme.scss.liquid or base.scss.liquid