newcoder1010 3 Posted August 4, 2020 Report Share Posted August 4, 2020 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! Quote Link to post Share on other sites
Ingolme 1,022 Posted August 5, 2020 Report Share Posted August 5, 2020 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. Quote Link to post Share on other sites
dsonesuk 914 Posted August 5, 2020 Report Share Posted August 5, 2020 Once you have done valid html by adding closing quotes to class names, all you have to do is add <div class="container"> <div class="row"> <!-- existing VALID html code --> </div></div> Quote Link to post Share on other sites
newcoder1010 3 Posted August 6, 2020 Author Report Share Posted August 6, 2020 Thank you! Flexbox requires me to spend sometime before I am able to do it. I will look into it later. @dsonesuk I am bit confused with your answer. Can you please clarify a bit? Quote Link to post Share on other sites
dsonesuk 914 Posted August 6, 2020 Report Share Posted August 6, 2020 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. Quote Link to post Share on other sites
newcoder1010 3 Posted August 6, 2020 Author Report Share Posted August 6, 2020 Thanks! I will play with it. Quote Link to post Share on other sites
newcoder1010 3 Posted August 8, 2020 Author Report Share Posted August 8, 2020 Could you please take a look at here? My requirement is to put border around each block. If I did not use border, then I might be okay. When I put borders and height then I see problem. How can I make the columns responsive and equal height? Quote Link to post Share on other sites
dsonesuk 914 Posted August 8, 2020 Report Share Posted August 8, 2020 (edited) 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 August 8, 2020 by dsonesuk Quote Link to post Share on other sites
newcoder1010 3 Posted August 9, 2020 Author Report Share Posted August 9, 2020 Now it is working. I set parent class to display flex and then removed height from child elements. Many thanks! Quote Link to post Share on other sites
dsonesuk 914 Posted August 9, 2020 Report Share Posted August 9, 2020 Ahh. You are using version 3 of bootstrap, that doesn't use flex only 4 does, but you can add d-flex along with class 'row' which will give same result. Quote Link to post Share on other sites
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.