Issues with CSS when using display: table-cell

Here is the HTML code I am currently working with:

<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>

And here is the CSS associated with this code:

.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;
}

Currently, I am experiencing an issue where the second column does not match the height of the first column when the viewport width is set to 990px. Is there a way to ensure that both columns have the same height in each row? For example, making sure the 'Projects' cell matches the height of the image on the right, and doing the same for the row below it.

https://i.sstatic.net/G9ji1.jpg

css

Answer №1

Consider using 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 may choose to disregard .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%;
    }

Answer №2

After carefully reviewing your website, I have identified a solution to the issue. You can resolve it by making adjustments to the following CSS rules:

 @media (min-width: 981px) {   
    .home .et_pb_section_3.full-width-row .et_pb_row {
        display: flex;
        flex-flow: row nowrap; // ensuring they do not collapse
    }

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

I hope this resolves the problem for you :)

Answer №3

Upon reviewing your website, I noticed a small update needed in your CSS code: display: table-row

I have provided a code snippet below that may help you solve the issue:

  1. If you want the code to run on a particular @viewport - 990px, then wrap the code inside @media (min-width: 990px) { }
  2. Supported Browsers: Chrome, Mozilla, 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...
        </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, euismo...
        </div>
      </div>
    </div>
  </div>
</div>

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

Arranging Images with CSS Overlapping

I am striving to make the blue block and red block scale proportionally with the webpage, while also maintaining their position without any shifting up or down. As depicted in this gif, the blocks somewhat accomplish what I desire when scaling diagonally, ...

htmlcssimageresizeoverlap

What is the proper way to define a class attribute for an HTML element within a PHP file?

I am having trouble writing the class attribute in a PHP file for an HTML element. Here is my code: echo '<div><p class="'.($value->getIsRequire() == 1) ? 'required' : ''.'"> </p> <input type="tex ...

phphtmlcssmagento-1.9

Do not execute the script if the window's width is below a certain threshold

I have a unique website layout that adjusts to different screen sizes, and I've incorporated some jQuery functionality. Here is a snippet of the code: <script> $(document).ready(function(){ $("#D1000C36LPB3").click(function(){$("#D ...

javascriptjquerycss

Whenever a tab is refreshed, the page will automatically redirect to the first tab

When using the application below, if the user is not in Tab 2 or Tab 3 and clicks on refresh, the page automatically goes to Tab 1. Is there a way to prevent this behavior and keep the user in their current tab after refreshing? Any suggestions on how to ...

htmlcssrshiny

Is CSS3 Background Specification Still Incomplete?

Currently in Chrome, the background style specification is: background: color position/size repeat origin clip attachment image|initial|inherit; However, I am having trouble making the position/size fragment work; I should be able to use red top left 10 ...

css

The spacing between images on mobile devices is excessive

My images on mobile have too much space between them: mobile version They appear fine in Dev Tools: dev tools version This is my HTML: <div class="container-fluid"> <!-- <br> --> <div class="row"> ...

htmlcssmobilebootstrap-4mobile-development

What is the best method for specifying CSS styles for a Vue.js component during the registration process?

Is it possible to register a custom Vue.js component using the following code? // register Vue.component('my-component', { template: '<div class="my-class">A custom component!</div>' }) For more information, you ...

javascriptcssvue.jsstylesheetvue-component

Navigation bar fails to expand to the full width of the page

I need assistance with optimizing my website for mobile use. I am facing issues with excess white space on the right side of the navbar. Here is a visual representation of the problem: I have attempted modifying the CSS of the body and nav tags, as well ...

htmlcssbootstrap-4navbar

Adjust the position of the hover background and font downwards

I am experiencing an issue with the hover effect on my navigation bar. When I hover over the different elements in the nav bar, the text and background appear to be moved up slightly and are not aligned with the nav bar. Here is a screenshot: https://i.s ...

htmlcss

Utilizing Bootstrap's Multi-Grid System

I am currently working on implementing a Bootstrap grid design that resembles pic1.jpg. However, I am facing challenges in achieving the desired layout, as pic2.jpg shows the current scenario. Below, I have shared the code I am using. pic1.jpg :- ! pic2. ...

javascripthtmlcsstwitter-bootstrap

assistance needed in setting up an HTML nested list for a sub navigation menu

I'm encountering an issue with my nested list that is used to create a subnav. It's currently positioned absolutely, but its parent cannot be relatively positioned as the overflow on the parent's parent is hidden, preventing the full sub nav ...

jqueryhtmlcssoverflowcss-position

Button not responding to CSS3 transitions

I'm working on styling a complex button using CSS3, and it seems to be displaying correctly except for the transitions not working as intended. I've tried testing it in various browsers like Mozilla, Opera, and Chrome with no success. The button ...

csscss-transitions

Leverage Bootstrap to manage multiple tab panels with one tab navigation system

Is there a way to control two different tab contents with a single tab navigation in Bootstrap 4? In Bootstrap 3, I used comma separated data targets for achieving this (like in this example: ). However, in Bootstrap 4, this method no longer works for ta ...

jquerycsstwitter-bootstrapbootstrap-4bootstrap-5

Only apply prevent default on specific levels for better control

I am currently working on a menu with submenus. I am facing an issue where when I click on a top-level menu item, I need to use prevent default because they are anchor tags. However, for the submenu items, I do not want to prevent default behavior. I am st ...

javascriptjqueryhtmlcss

What is the best way to transition a div from the top to the bottom in mobile view?

Currently, I am utilizing Bootstrap 4 framework; however, if it operates effectively on version 3, then it should work seamlessly on v4. Within a single column, I have incorporated 2 div elements as follows: <div class="row"> <div class="col ...

htmlcsstwitter-bootstrapbootstrap-4

Issue with alignment: Safari browser on MacBook displaying Bootstrap buttons all the way to the right side of the screen

I recently viewed one of my websites on Safari and noticed that the buttons were being pushed to the far right of the screen (between 100-200%), causing unnecessary horizontal scrolling, while everything appeared as intended on Google Chrome. Here is a sni ...

htmlcssmacosbuttonsafari

When overflowY is set to auto, the dropdown may be cut off if there are

https://i.sstatic.net/Twcnp.png My col-4 has overflow-y set to auto, but my dropdown gets cut off behind another col when it's open. If I change overflow-y to visible, the dropdown is no longer cut off but the max-height parameter is ignored. const ...

htmlcssreactjsoverflow

Troubleshooting problem with AngularJS ng-repeat

Seeking assistance with an angularjs issue as a newcomer to the platform. Building a photo gallery where the initial page displays thumbnail photos from twitter and instagram using ng-repeat loop. Hovering over an image fades it out, revealing a button f ...

javascriptangularjshtmlcss

Having trouble with the image resizing in Bootstrap 5 on Safari?

I am facing an issue with a website: There are four images under the section "Serviceangebote" that appear as square icons representing circles. I have no trouble viewing them correctly on Windows (Chrome, Firefox, Edge) and Android devices. The images ar ...

htmlcsstwitter-bootstrapsafaribootstrap-5

Aligning content with CSS styling

I am facing a challenge with aligning buttons in three different td tags, as the text content within each varies. I want the buttons to line up evenly regardless of the amount of text present. Is there a solution that does not involve setting a fixed parag ...

htmlcss