Jump to content

Setting up heights to multiple section blocks


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 post
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 post
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 post
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 post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...