CODEWITHSUNDEEP
css
Steve
Steve

Reputation: 1765

CSS - display: table-cell not working properly

I have:

HTML:

<div class="et_pb_row et_pb_row_1">
    <div class="et_pb_column et_pb_column_1_2 et_pb_column_3    et_pb_css_mix_blend_mode_passthrough">
        <div class="et_pb_module et_pb_text et_pb_text_1 et_pb_bg_layout_dark  et_pb_text_align_left">
        </div>
    </div>              
    <div class="et_pb_column et_pb_column_1_2 et_pb_column_4    et_pb_css_mix_blend_mode_passthrough et-last-child">
        <div class="et_pb_module et_pb_text et_pb_text_2 et_pb_bg_layout_light  et_pb_text_align_left">
        </div>
    </div>      
</div>

CSS:

.home .et_pb_section_3.full-width-row .et_pb_row {
    display: table;
}
.home .et_pb_section_3.full-width-row .et_pb_row .et_pb_column {
    display: table-cell;
}

However, the 2nd column is not the same height as the first column @ viewport width 990px:

How do I make the column heights the same on each row? i.e. how do I make the Projects cell the same height as the image to the right, and the same for the row below it?

enter image description here

Upvotes: 4

Views: 926

Answers (3)

A. N. SINHA
A. N. SINHA

Reputation: 106

After go through your web sites need to small update in your css display: table-row

I have written small code snippet might be it's really help you to solve your's problem :)

  1. if you want the code will be run on particular @viewport - 990px: then below code will wrap inside @media (min-width: 990px) { }
  2. Supported Browsers : Chrome, Mozila, Safari, Edge, IE-8 and above

.home .et_pb_section_3.full-width-row .et_pb_row {
    display: table-row;
    background-color: #ff0000;
}
.home .et_pb_section_3.full-width-row .et_pb_row .et_pb_column {
    padding: 20px;
    display: table-cell;
    vertical-align: middle;
    width: 50%;
}
<div class="home">
  <div class="et_pb_section_3 full-width-row">
    <div class="et_pb_row et_pb_row_1">
      <div class="et_pb_column et_pb_column_1_2 et_pb_column_3    et_pb_css_mix_blend_mode_passthrough">
        <div class="et_pb_module et_pb_text et_pb_text_1 et_pb_bg_layout_dark  et_pb_text_align_left">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent orci nunc, euismod eu imperdiet a, aliquet ut turpis. Nulla nec nisi sit amet mi consequat elementum. Nulla at lacus eget augue pretium auctor.
        </div>
      </div>
      <div class="et_pb_column et_pb_column_1_2 et_pb_column_4    et_pb_css_mix_blend_mode_passthrough et-last-child">
        <div class="et_pb_module et_pb_text et_pb_text_2 et_pb_bg_layout_light  et_pb_text_align_left">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent orci nunc, euismod eu imperdiet a, aliquet ut turpis. Nulla nec nisi sit amet mi consequat elementum. Nulla at lacus eget augue pretium auctor. Nulla vulputate tincidunt tortor, quis molestie
          risus dictum quis. Nunc vel dolor eleifend, suscipit ex eget, ullamcorper felis. Etiam vitae magna massa. Fusce porttitor enim leo, non interdum dolor porta et.
        </div>
      </div>
    </div>
  </div>
</div>

Upvotes: 0

mblancodev
mblancodev

Reputation: 506

I inspected your site and you can solve it by changing the following rules:

 @media (min-width: 981px) {    
    .home .et_pb_section_3.full-width-row .et_pb_row {
        display: flex;
        flex-flow: row nowrap; // this way they won't collapse 
    }

    .full-width-row .et_pb_module {
        height: 100%;
    }

Hope helps :)

Upvotes: 2

hoangkianh
hoangkianh

Reputation: 649

You can use display: flex instead of display: table.

 @media (min-width: 981px) {    
    .home .et_pb_section_3.full-width-row .et_pb_row {
        display: flex;
        flex-direction: row;
    }

    /* You can ignore .et_pb_column */
    .home .et_pb_section_3.full-width-row .et_pb_row .et_pb_column {
        display: block 
    }

    .full-width-row .et_pb_module {
        height: 100%;
    }

Upvotes: 3

Related Questions