1

I'm building a complex table and having some issues with responsiveness and being able to align all the columns in a row to have the same height depending on how much content is inside a certain row.

enter image description here

Please run the code in full page (1100px +) since mobile responsiveness is not completed yet

Here is the JSFiddle: http://jsfiddle.net/fLr9th4y/2/ - Please reference to #11 in the table to view an example.

Here is the code:

.heading {
    background-color: #00C6D7;
}
.sub-heading {
    background-color: white;
    border-bottom: 1px solid lightgray;
}
h4, h6 {
    margin-bottom: 0px;
}
.container {
    box-shadow: 0 1px 3px rgba(77,72,69,0.2), 0 6px 10px rgba(77,72,69,0.15);
}
.row > .col-md-12 > span {
    font-size: smaller;
}
.col-md-4 > .row {
    padding-top: .6rem!important;
    padding-bottom: .6rem!important;
    height: 60px;
}
.col-md-3 > .row {
    padding-top: .6rem!important;
    padding-bottom: .6rem!important;
    height: 60px;
}
.col-md-2 {
    display: flex;
    justify-content: center;
    align-items: center;
}
.col-md-9 {
    padding: 0px!important;
}
.bl {
    border-left: 1px solid lightgray;
}
.bb {
    border-bottom: 1px solid #00C6D7;
}
.bg-white {
    background-color: white;
}
.mainText {
    font-style: italic;
    color: #00C6D7;
}
.bg-fhdark {
    background-color: #5E6A71;
}
.title {
    color: #A2AD00;
}
.blank {
    background: transparent!important;
}

.slick-prev, .slick-next {
    background: black!important;
}
.r1 {
    color: black;
}

/* BootStrap 4 Classes */
.py-5 {
    padding-bottom: 3rem!important;
    padding-top: 3rem!important;
}
.py-2 {
    padding-bottom: .5rem!important;
    padding-top: .5rem!important;
}
.text-white {
    color: #fff!important;
}
.text-left {
    text-align: left!important;
}
.text-uppercase {
    text-transform: uppercase!important;
}
.font-weight-bold {
    font-weight: 700!important;
}
.small {
    font-size: 80%;
    font-weight: 400;
}
.row {
    display: flex;
    flex-wrap: wrap;
}
.row-11 {
    height: auto!important;
}
/* ----- */
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css">
  <!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css"/>
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css"/>
</head>

<body>
<div class="py-5">
    <div class="container">
        <div class="row">
            <div class="col-md-10 text-white text-left py-2 heading">
                <h4 class="text-uppercase font-weight-bold">Core Competencies</h4>
                <span class="small">Our goal was to develop a set of core competencies that are consistent across the agency amd reflect growth as a priority.
                </span>
            </div>
            <div class="col-md-2 col-md-2 text-center py-2 heading">
                <img src="" />
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <div class="row">
                    <div class="col-md-3">
                        <div class="row r1">
                            <div class="col-md-12">
                                <span>Test</span>
                            </div>
                        </div>
                        <div class="row py-1 bg-fhdark">
                            <div class="col-md-12 text-left text-uppercase font-weight-bold text-white">
                                <span>Client</span>
                            </div>
                        </div>
                        <div class="row bb">
                            <div class="col-md-12">
                                <span>Client Focus, Strategic Counsel and Consultancy</span>
                            </div>
                        </div>
                        <div class="row bb">
                            <div class="col-md-12">
                                <span>Integrated Strategy and Account Management</span>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <span>Creativity and Innovation</span>
                            </div>
                        </div>
                        <div class="row py-1 bg-fhdark">
                            <div class="col-md-12 text-left text-uppercase font-weight-bold text-white">
                                <span>Talent</span>
                            </div>
                        </div>
                        <div class="row bb">
                            <div class="col-md-12">
                                <span>Manage Full Talent LifeCycle</span>
                            </div>
                        </div>
                        <div class="row bb">
                            <div class="col-md-12">
                                <span>Professional Development/Developing and Empowering</span>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <span>Self-Leadership</span>
                            </div>
                        </div>
                        <div class="row py-1 bg-fhdark">
                            <div class="col-md-12 text-left text-uppercase font-weight-bold text-white">
                                <span>Business Development and Growth</span>
                            </div>
                        </div>
                        <div class="row bb">
                            <div class="col-md-12">
                                <span>New Business Strategy</span>
                            </div>
                        </div>
                        <div class="row bb">
                            <div class="col-md-12">
                                <span>Prospecting</span>
                            </div>
                        </div>
                        <div class="row bb">
                            <div class="col-md-12">
                                <span>New Business Pitch Preparation, Participation and Leadership</span>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <span>Organic Growth</span>
                            </div>
                        </div>
                        <div class="row py-1 bg-fhdark">
                            <div class="col-md-12 text-left text-uppercase font-weight-bold text-white">
                                <span>Finance and Operations</span>
                            </div>
                        </div>
                        <div class="row bb row-11">
                            <div class="col-md-12">
                                <span>Financial Management of Accounts (Account Profitability, Realization, Budgets) TEST TEST TEST TEST TEST TEST TEST</span>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <span>Staffing and Resource Planning</span>
                            </div>
                        </div>
                    </div>


                    <div class="col-md-9">
                        <section class="regular slider">
                            <div class="col-md-4 bl">
                                <div class="row r1">
                                    <div class="col-md-12">
                                        <h6 class="text-uppercase font-weight-bold title">Junior</h6>
                                        <span>Valued Colleague and Practitioner</span>
                                    </div>
                                </div>
                                <div class="row bg-fhdark">
                                    <div class="col-md-12">
                                        <div class="col-md-12 text-left text-uppercase font-weight-bold text-white">
                                            
                                        </div>
                                    </div>
                                </div>
                                <div class="row bb">
                                    <div class="col-md-12">
                                        <span>1</span>
                                    </div>
                                </div>
                                <div class="row bb">
                                    <div class="col-md-12">
                                        <span>2</span>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-12">
                                        <span>3</span>
                                    </div>
                                </div>
                                <div class="row bg-fhdark">
                                    <div class="col-md-12">
                                        <div class="col-md-12 text-left text-uppercase font-weight-bold text-white">
                                            
                                        </div>
                                    </div>
                                </div>
                                <div class="row bb">
                                    <div class="col-md-12">
                                        <span>4</span>
                                    </div>
                                </div>
                                <div class="row bb">
                                    <div class="col-md-12">
                                        <span>5</span>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-12">
                                        <span>6</span>
                                    </div>
                                </div>
                                <div class="row bg-fhdark">
                                    <div class="col-md-12">
                                        <div class="col-md-12 text-left text-uppercase font-weight-bold text-white">
                                            
                                        </div>
                                    </div>
                                </div>
                                <div class="row bb">
                                    <div class="col-md-12">
                                        <span>7</span>
                                    </div>
                                </div>
                                <div class="row bb">
                                    <div class="col-md-12">
                                        <span>8</span>
                                    </div>
                                </div>
                                <div class="row bb">
                                    <div class="col-md-12">
                                        <span>9</span>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-12">
                                        <span>10</span>
                                    </div>
                                </div>
                                <div class="row bg-fhdark">
                                    <div class="col-md-12">
                                        <div class="col-md-12 text-left text-uppercase font-weight-bold text-white">
                                            
                                        </div>
                                    </div>
                                </div>
                                <div class="row bb row-11">
                                    <div class="col-md-12">
                                        <span>11</span>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-12">
                                        <span>12</span>
                                    </div>
                                </div>
                            
                            
                            
                            
                            </div>




                            <div class="col-md-4 bl">
                                <div class="row r1">
                                    <div class="col-md-12">
                                        <h6 class="text-uppercase font-weight-bold title">Mid</h6>
                                        <span>Trusted Colleague; Proven and Creative Practitioner</span>
                                    </div>
                                </div>
                                <div class="row bg-fhdark">
                                    <div class="col-md-12">
                                        <div class="col-md-12 text-left text-uppercase font-weight-bold text-white">
                                            
                                        </div>
                                    </div>
                                </div>
                                <div class="row bb">
                                    <div class="col-md-12">
                                        <span>1</span>
                                    </div>
                                </div>
                                <div class="row bb">
                                    <div class="col-md-12">
                                        <span>2</span>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-12">
                                        <span>3</span>
                                    </div>
                                </div>
                                <div class="row bg-fhdark">
                                    <div class="col-md-12">
                                        <div class="col-md-12 text-left text-uppercase font-weight-bold text-white">
                                            
                                        </div>
                                    </div>
                                </div>
                                <div class="row bb">
                                    <div class="col-md-12">
                                        <span>4</span>
                                    </div>
                                </div>
                                <div class="row bb">
                                    <div class="col-md-12">
                                        <span>5</span>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-12">
                                        <span>6</span>
                                    </div>
                                </div>
                                <div class="row bg-fhdark">
                                    <div class="col-md-12">
                                        <div class="col-md-12 text-left text-uppercase font-weight-bold text-white">
                                            
                                        </div>
                                    </div>
                                </div>
                                <div class="row bb">
                                    <div class="col-md-12">
                                        <span>7</span>
                                    </div>
                                </div>
                                <div class="row bb">
                                    <div class="col-md-12">
                                        <span>8</span>
                                    </div>
                                </div>
                                <div class="row bb">
                                    <div class="col-md-12">
                                        <span>9</span>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-12">
                                        <span>10</span>
                                    </div>
                                </div>
                                <div class="row bg-fhdark">
                                    <div class="col-md-12">
                                        <div class="col-md-12 text-left text-uppercase font-weight-bold text-white">
                                            
                                        </div>
                                    </div>
                                </div>
                                <div class="row bb row-11">
                                    <div class="col-md-12">
                                        <span>11</span>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-12">
                                        <span>12</span>
                                    </div>
                                </div>


                            </div>
                            <div class="col-md-4 bl">
                                <div class="row r1">
                                    <div class="col-md-12">
                                        <h6 class="text-uppercase font-weight-bold title">Senior</h6>
                                        <span>Trusted Client Advisor and Partner; Proven Agency Leader</span>
                                    </div>
                                </div>
                                <div class="row bg-fhdark">
                                    <div class="col-md-12">
                                        <div class="col-md-12 text-left text-uppercase font-weight-bold text-white">
                                            
                                        </div>
                                    </div>
                                </div>
                                <div class="row bb">
                                    <div class="col-md-12">
                                        <span>1</span>
                                    </div>
                                </div>
                                <div class="row bb">
                                    <div class="col-md-12">
                                        <span>2</span>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-12">
                                        <span>3</span>
                                    </div>
                                </div>
                                <div class="row bg-fhdark">
                                    <div class="col-md-12">
                                        <div class="col-md-12 text-left text-uppercase font-weight-bold text-white">
                                            
                                        </div>
                                    </div>
                                </div>
                                <div class="row bb">
                                    <div class="col-md-12">
                                        <span>4</span>
                                    </div>
                                </div>
                                <div class="row bb">
                                    <div class="col-md-12">
                                        <span>5</span>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-12">
                                        <span>6</span>
                                    </div>
                                </div>
                                <div class="row bg-fhdark">
                                    <div class="col-md-12">
                                        <div class="col-md-12 text-left text-uppercase font-weight-bold text-white">
                                            
                                        </div>
                                    </div>
                                </div>
                                <div class="row bb">
                                    <div class="col-md-12">
                                        <span>7</span>
                                    </div>
                                </div>
                                <div class="row bb">
                                    <div class="col-md-12">
                                        <span>8</span>
                                    </div>
                                </div>
                                <div class="row bb">
                                    <div class="col-md-12">
                                        <span>9</span>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-12">
                                        <span>10</span>
                                    </div>
                                </div>
                                <div class="row bg-fhdark">
                                    <div class="col-md-12">
                                        <div class="col-md-12 text-left text-uppercase font-weight-bold text-white">
                                            
                                        </div>
                                    </div>
                                </div>
                                <div class="row bb row-11">
                                    <div class="col-md-12">
                                        <span>11</span>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-12">
                                        <span>12</span>
                                    </div>
                                </div>


                                
                            </div>
                        </section>
                    </div>









                </div>
            </div>
        </div>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>

<script type="text/javascript">
    $(function() {
        $(".regular").slick({
        dots: false,
        infinite: false,
        slidesToShow: 2,
        slidesToScroll: 1,
    });
});
</script>
</body>
</html>

2 Answers 2

0

Just restructure your html. You having the row and inside you need to have your columns (each is col-md-3 if I see it right, but that's not so important). You can also use css-grid for it: https://css-tricks.com/snippets/css/complete-guide-grid/

1
  • I have to keep it this way to have the three column slick carousel be functional sadly.
    – user9727963
    Dec 27, 2018 at 17:50
0

I believe you are approaching it wrong way. You should refactor your HTML structure base on row instead of column, it will be easier to make it responsive. You should customize slick function to make it work instead of working arround with CSS

.heading {
    background-color: #00C6D7;
}
.sub-heading {
    background-color: white;
    border-bottom: 1px solid lightgray;
}
h4, h6 {
    margin-bottom: 0px;
}
.container {
    box-shadow: 0 1px 3px rgba(77,72,69,0.2), 0 6px 10px rgba(77,72,69,0.15);
}
.row > .col-md-12 > span {
    font-size: smaller;
}
.col-md-4 > .row {
    padding-top: .6rem!important;
    padding-bottom: .6rem!important;
    height: 60px;
}
.col-md-3 > .row {
    padding-top: .6rem!important;
    padding-bottom: .6rem!important;
    height: 60px;
}
.col-md-2 {
    display: flex;
    justify-content: center;
    align-items: center;
}
.col-md-9 {
    padding: 0px!important;
}
.bl {
    border-left: 1px solid lightgray;
}
.bb {
    border-bottom: 1px solid #00C6D7;
}
.bg-white {
    background-color: white;
}
.mainText {
    font-style: italic;
    color: #00C6D7;
}
.bg-fhdark {
    background-color: #5E6A71;
}
.title {
    color: #A2AD00;
}
.blank {
    background: transparent!important;
}

.slick-prev, .slick-next {
    background: black!important;
}
.r1 {
    color: black;
}

/* BootStrap 4 Classes */
.py-5 {
    padding-bottom: 3rem!important;
    padding-top: 3rem!important;
}
.py-2 {
    padding-bottom: .5rem!important;
    padding-top: .5rem!important;
}
.text-white {
    color: #fff!important;
}
.text-left {
    text-align: left!important;
}
.text-uppercase {
    text-transform: uppercase!important;
}
.font-weight-bold {
    font-weight: 700!important;
}
.small {
    font-size: 80%;
    font-weight: 400;
}
.row {
    display: flex;
    flex-wrap: wrap;
}
.row-11 {
    height: auto!important;
}
/* ----- */
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">

<div class="row bg-fhdark">
    <div class="col-sm-4 text-left text-uppercase font-weight-bold text-white">
        <span>Finance and Operations</span>
    </div>
    <div class="col-sm-4"></div>
    <div class="col-sm-4"></div>
</div>
<div class="row bb">
    <div class="col-sm-4">
        <span>Financial Management of Accounts (Account Profitability, Realization, Budgets) TEST TEST TEST TEST TEST
            TEST TEST</span>
    </div>
    <div class="col-sm-4 bl">11</div>
    <div class="col-sm-4 bl">12</div>
</div>
<div class="row bb">
    <div class="col-sm-4">
        <span>Staffing and Resource Planning</span>
    </div>
    <div class="col-sm-4 bl">12</div>
    <div class="col-sm-4 bl">12</div>
</div>

4
  • This would be easy, but I'm using a slick carousel to control the other three columns @Hai, that's why I went down that route.
    – user9727963
    Dec 28, 2018 at 3:10
  • 1
    @SaintLouisEvents Yes, that's why I said you should customize slick carousel function instead of working arround with CSS. For example, you can wrap 3 column in each row to a .wrapper class and make it slide with asNavFor attribute, take a a look at here: jsfiddle.net/rk0tuoy7/2
    – Hai Pham
    Dec 28, 2018 at 3:36
  • WOW! You might just have saved me Hai! Thanks for the feedback, I'll upvote this just for the generous help.
    – user9727963
    Dec 28, 2018 at 3:47
  • @SaintLouisEvents yep, thank you. I am looking forward to hearing other feedbacks until you solve the problem.
    – Hai Pham
    Dec 28, 2018 at 3:57

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.