Jump to content

Setting up heights to multiple section blocks


newcoder1010
 Share

Recommended Posts

HTML:

<section data-quickedit-entity-id="block_content/43" id="block-acquisitionpractices" class="col-lg-6 col-md-6 col-sm-6 col-xs-12>
<div> one </div>
<div> two </div>
<div> three </div>
</section>

<section data-quickedit-entity-id="block_content/43" id="block-acquisitionpractices" class="col-lg-6 col-md-6 col-sm-6 col-xs-12>
<div> one </div>
<div> two </div>
<div> three </div>
<div> four </div>

</section>

<section data-quickedit-entity-id="block_content/43" id="block-acquisitionpractices" class="col-lg-6 col-md-6 col-sm-6 col-xs-12>
<div> one </div>
<div> two </div>

</section>

<section data-quickedit-entity-id="block_content/43" id="block-acquisitionpractices" class="col-lg-6 col-md-6 col-sm-6 col-xs-12>
<div> one </div>
<div> two </div>
<div> three </div>
<div> one </div>
<div> two </div>
<div> three </div>
</section>

As you can see, different blocks have different sizes of strings. However, I like to set the height equal. Height:650px works but some devices do not fit the contents, some devices show too much padding in the bottom, etc. What would be the best way to set the height equal(html plus css)  in all devices when blocks may not have equal number of characters?

 

Thanks!

Link to comment
Share on other sites

If instead of bootstrap you use CSS, you can use the flexbox: https://www.w3schools.com/css/css3_flexbox.asp

With the align-items CSS property, you can make all of the items in the flexbox have the same height. To display a different amount of items per row, you can enable flex-wrap and give each box a percentage width using media queries.

Link to comment
Share on other sites

Your code uses bootstrap, the code is already set up for flex box usage. But you are missing part of bootstrap code that uses display: flex; the class 'row' element that must wrap round all the elements with class 'col-*'. So by inserting your original code (once you have fixed missing quotes) where the html comment is, will correct it how it should've been used to achieve the flex box effect.

Link to comment
Share on other sites

Don't use height.

The highest container whos content will set the height of itself and obviously the parent container. Then the flex box effect should make each other child containers, fill the height available to them from parent. So you dont need to set the height, doing so breaks the whole point in using flex- box in first place.

Edited by dsonesuk
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...