Support » Theme: Customizr » equal heights for columns

  • I have this simple column layout:

    <div class="row-fluid">
    	<div class="span6 custom-air-image-box">
    		<div class="row-fluid">
    			<p>This is some text. This is some text. This is some text. This is some text. This is some text.</p>
    		</div>
    	</div>
    
    	<div class="span6 custom-air-image-box">
    		<p>This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.</p>
    	</div>
    </div>

    This css gives the column background color:

    .custom-air-image-box {
    	background-color: #e4ffd3;
    	padding: 10px;
    	border-radius: 6px;
    }

    When there is more content in one column than the other column, columns are not the same height (as can be see in page test example I provided).

    Is there a suggested method to keep columns at same height, so all columns maintain the height of the column with the largest height?

    This way, if the column has a background color, all columns within a row will appear to have the same height to the user (when columns have background color assigned).

    I know I can set a height to the column, such as this:

    .custom-air-image-box {
    	height: 500px;
    }

    …but this does not work well with responsive design.

    I’ve seen this sort of thing done with flexbox but I can’t figure out how to accomplish this in Customizr. Thank you for any suggestions.

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
  • @andrew55 ,

    To do that, go to Appearance → Customize → Additional CSS and enter the following code:

    .entry-content .row-fluid {
      display: flex;
    }

    Let me know if that does it.
    Thanx.

    That’s a life saver. Thank you very much. Just to check, I noticed that applying this style prevents columns from breaking normally at smaller screen sizes. I applied this css:

    @media only screen and (max-width: 767px)  {
    .entry-content .row-fluid {
      display: block;
    }
    }

    This seems to work at allowing columns to once again break correctly at smaller screen sizes. Is this the correct method?

    When using flex with Customizr, is there a method to always have buttons (or other elements) align to bottom of a column?

    For example, in the provided example page, you can see the orange buttons are at different heights. Any way to get all these buttons aligned to the bottom of the boxes?

    I tried different methods I’ve found:

    margin-bottom: auto;

    and…

    align-self: flex-end;

    …but I can’t seem to get these to work on the example page. Maybe these methods are for newer version of flex or bootstrap?

    Thanks for any suggestions.

    Never mind. I was able to accomplish this using margin-top: auto;

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘equal heights for columns’ is closed to new replies.