1

I am trying to make the bottom right greyish box (the one without image) same height and width as other boxes with images. It is supposed to be responsive but if I manage to make it fit this resolution it doesn't work in other resolutions. I tried with flexbox but couldn't make it work. I am using Bootstrap as you can see. I also tried using vh and vw but no luck...

I would really appreciate if someone with more experience could tell me the proper way to do this? Thanks all for reading and trying to help!

Here is the screenshot of what I am trying to achieve:enter image description here

Here is my code so far:

<!-- T E A M   S E C T I O N -->
<section id="team" class="no-padding">
    <div class="container-fluid">

        <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 text-center">
                <h1><span class="orange">[ </span>Meet Our Team<span class="orange"> ]</span></h1>
                <p>A perfect blend of creativity and technical wizardry.</br>The best people formula for great websites!</p>
            </div>
        </div>

        <div class="row no-gutter">

            <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
                <a class="team-box" rel="" href="img/team/1.jpg" title="">
                    <img src="img/team/1.jpg" class="img-responsive" alt="">
                    <div class="team-box-caption">
                        <div class="team-box-caption-content">
                            <div class="name">
                                Full Name
                            </div>
                            <div class="position">
                                Position
                            </div>
                        </div>
                    </div>
                </a>
            </div>

            <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
                <a class="team-box" rel="" href="img/team/2.jpg" title="">
                    <img src="img/team/2.jpg" class="img-responsive" alt="">
                    <div class="team-box-caption">
                        <div class="team-box-caption-content">
                            <div class="name">
                                Full Name
                            </div>
                            <div class="position">
                                Position
                            </div>
                        </div>
                    </div>
                </a>
            </div>

            <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
                <a class="team-box" rel="" href="img/team/3.jpg" title="">
                    <img src="img/team/3.jpg" class="img-responsive" alt="">
                    <div class="team-box-caption">
                        <div class="team-box-caption-content">
                            <div class="name">
                                Full Name
                            </div>
                            <div class="position">
                                Position
                            </div>
                        </div>
                    </div>
                </a>
            </div>

            <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
                <a class="team-box" rel="" href="img/team/4.jpg" title="">
                    <img src="img/team/4.jpg" class="img-responsive" alt="">
                    <div class="team-box-caption">
                        <div class="team-box-caption-content">
                            <div class="name">
                                Full Name
                            </div>
                            <div class="position">
                                Position
                            </div>
                        </div>
                    </div>
                </a>
            </div>

            <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
                <a class="team-box" rel="" href="img/team/5.jpg" title="">
                    <img src="img/team/5.jpg" class="img-responsive" alt="">
                    <div class="team-box-caption">
                        <div class="team-box-caption-content">
                            <div class="name">
                                Full Name
                            </div>
                            <div class="position">
                                Position
                            </div>
                        </div>
                    </div>
                </a>
            </div>

            <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
                <a class="team-box" rel="" href="img/team/6.jpg" title="">
                    <img src="img/team/6.jpg" class="img-responsive" alt="">
                    <div class="team-box-caption">
                        <div class="team-box-caption-content">
                            <div class="name">
                                Full Name
                            </div>
                            <div class="position">
                                Position
                            </div>
                        </div>
                    </div>
                </a>
            </div>

            <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
                <a class="team-box" rel="" href="img/team/7.jpg" title="">
                    <img src="img/team/7.jpg" class="img-responsive" alt="">
                    <div class="team-box-caption">
                        <div class="team-box-caption-content">
                            <div class="name">
                                Full Name
                            </div>
                            <div class="position">
                                Position
                            </div>
                        </div>
                    </div>
                </a>
            </div>

            <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
                <a class="team-box" rel="" href="img/team/8.jpg" title="">
                    <img src="img/team/8.jpg" class="img-responsive" alt="">
                    <div class="team-box-caption">
                        <div class="team-box-caption-content">
                            <div class="name">
                                Full Name
                            </div>
                            <div class="position">
                                Position
                            </div>
                        </div>
                    </div>
                </a>
            </div>

            <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
                <div class="team-box">
                    <div class="team-box-last">
                        <h3>Want to join our team?</h3>
                        <p>We’re always looking for talented designers, developers, project managers and anyone who’s driven and has a passion for the digital industries.
                        </p>
                        <ul>
                            <li><a href="#">Check our jobs page</a></li>
                            <li><a href="mailto: info@squares.com">Send us your CV</a></li>
                        </ul>
                    </div>
                </div>
            </div>

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

    /* -------- TEAM SECTION -------- */
#team{
    background-color: #fff;
    text-align: center;
    width: 100%;
}
#team h1{
    color: #345;
    font-weight: 700;
    margin-top: 50px;
    margin-bottom: 50px;
}
#team p{
    color: #345;
    font-size: 21px;
    margin-top: 0px;
    margin-bottom: 50px;
    padding-left: 15px;
    padding-right: 15px;
}
.no-padding {
    padding: 0;
}
.no-gutter > [class*=col-] {
    padding-right: 0;
    padding-left: 0;
}
.team-box {
    display: block;
    position: relative;
    margin: 0 auto;
    max-width: 650px;
    overflow: hidden;
}
.team-box img{
    -moz-transition: all 1s;
    -webkit-transition: all 1s;
    transition: all 1s;
}
.team-box:hover img {
  -moz-transform: scale(1.1);
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}
.team-box .team-box-caption {
    display: block;
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    color: #fff;
    opacity: 1;
    background: transparent;
    /* background: rgba(67,208,243,0.9); 
    -webkit-transition: all .35s;
    -moz-transition: all .35s;
    transition: all .35s; */
}
.team-box .team-box-caption .team-box-caption-content {
    position: absolute;
    bottom: 12px;
    width: 100%;
    text-align: left;
}
.team-box .team-box-caption .team-box-caption-content .name,
.team-box .team-box-caption .team-box-caption-content .position {
    padding: 0 15px;
    text-shadow: 0px 0px 5px #000;
}
.team-box .team-box-caption .team-box-caption-content .name {
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 700;
}
.team-box .team-box-caption .team-box-caption-content .position {
    font-size: 12px;
    text-transform: uppercase;
}
.team-box:hover .team-box-caption {
    opacity: 1;
}
@media(min-width:768px) {
    .team-box .team-box-caption .team-box-caption-content .name {
        font-size: 15px;
    }

    .team-box .team-box-caption .team-box-caption-content .position {
        font-size: 15px;
        text-transform: uppercase;
    }
}
.team-box-last{
    text-align: left;
    padding: 30px 30px;
}
.team-box:last-child{
    background-color: #f3f3f3;
}
#team .team-box-last h3{
    color: #345;
    padding-top: 15px;
    padding-left: 15px;
}
#team .team-box-last p{
    font-size: 18px;
    line-height: 23px;
    padding-top: 15px;
    margin-bottom: 30px;
}
#team .team-box-last ul{
    padding-left: 15px;
}
#team .team-box-last ul li{
    font-size: 18px;
    font-weight: 500;
}
#team .team-box-last ul li{
    list-style: none;
}
C. Felipe
  • 469
  • 2
  • 9
  • 22
  • This question has been asked before: http://stackoverflow.com/questions/19695784/how-can-i-make-bootstrap-columns-all-the-same-height – Nathaniel Flick Oct 07 '16 at 16:38
  • Thanks for your reply. I am reading it now. Hope it will solve my problem. – C. Felipe Oct 07 '16 at 16:40
  • Tried all the answers from the link you posted above but they are not fixing my problem + they mess up my other sections I built before... Grrr... – C. Felipe Oct 07 '16 at 16:55
  • 1
    Try playing with the text a little bit more. Usually text wins when it comes to layout and spacing, so make the text smaller, make the padding around it smaller, whatever you have to to do make it fit. Even overflow: hidden can help, but this will be unpredictable so use as a last resort. – Nathaniel Flick Oct 07 '16 at 17:52
  • Ok. I made it with resizing text and padding as you suggested. I know it's not a proper solution but it works and it's probably the simplest way to get out of the trouble I created :) Thanks for suggestion. – C. Felipe Oct 07 '16 at 19:17
  • 1
    Good! Hey if the solution is semantically correct then it's a good solution. ;) – Nathaniel Flick Oct 09 '16 at 08:06

1 Answers1

1

Well, you cannot really achieve this with CSS, you may add some Javascript code using jQuery to make it easier for you.

I am giving you an example just have a look to get an idea. The idea is to get the height of each image box which I have assigned id="getheight" and then add that height to the last box. Remember you need to use overflow:hidden if you want to see same height. I have altered your code and add some class and javascript to give you what you can do.

The problem in responsiveness in the last box is you need to also handle font-size or other stuff to make sure it always appears and perfect which I haven't touched that yet. However, you can still have scrollbar for longer text if you want.

All in all, this is one approach to solve your problem, there maybe more ways if spend more time.

** Please copy and see in bigger screen for responsiveness as well we watch console to see dynamic height. ***

var picHeight = $('#getheight').height();

$('.sameHeight').css('height',picHeight + 'px');

$('.team-box-last').css('height',picHeight + 'px')


$(window).on('resize',function(){
  var picHeight = $('#getheight').height();
   $('.sameHeight').css('max-height',picHeight + 'px');
})
/* -------- TEAM SECTION -------- */
#team{
    background-color: #fff;
    text-align: center;
    width: 100%;
}
#team h1{
    color: #345;
    font-weight: 700;
    margin-top: 50px;
    margin-bottom: 50px;
}
#team p{
    color: #345;
    font-size: 21px;
    margin-top: 0px;
    margin-bottom: 50px;
    padding-left: 15px;
    padding-right: 15px;
}
.no-padding {
    padding: 0;
}
.no-gutter > [class*=col-] {
    padding-right: 0;
    padding-left: 0;
}
.team-box {
    display: block;
    position: relative;
    margin: 0 auto;
    max-width: 650px;
    overflow: hidden;
}
.team-box img{
    -moz-transition: all 1s;
    -webkit-transition: all 1s;
    transition: all 1s;
}
.team-box:hover img {
  -moz-transform: scale(1.1);
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}
.team-box .team-box-caption {
    display: block;
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    color: #fff;
    opacity: 1;
    background: transparent;
    /* background: rgba(67,208,243,0.9); 
    -webkit-transition: all .35s;
    -moz-transition: all .35s;
    transition: all .35s; */
}
.team-box .team-box-caption .team-box-caption-content {
    position: absolute;
    bottom: 12px;
    width: 100%;
    text-align: left;
}
.team-box .team-box-caption .team-box-caption-content .name,
.team-box .team-box-caption .team-box-caption-content .position {
    padding: 0 15px;
    text-shadow: 0px 0px 5px #000;
}
.team-box .team-box-caption .team-box-caption-content .name {
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 700;
}
.team-box .team-box-caption .team-box-caption-content .position {
    font-size: 12px;
    text-transform: uppercase;
}
.team-box:hover .team-box-caption {
    opacity: 1;
}
@media(min-width:768px) {
    .team-box .team-box-caption .team-box-caption-content .name {
        font-size: 15px;
    }

    .team-box .team-box-caption .team-box-caption-content .position {
        font-size: 15px;
        text-transform: uppercase;
    }
}

.sameHeight{
overflow:hidden;
}
.team-box-last{
    text-align: left;
  overflow:auto;
  padding:30px 30px;
}
.team-box:last-child{
    background-color: #f3f3f3;
}
#team .team-box-last h3{
    color: #345;
    padding-left: 15px;
}
#team .team-box-last p{
    font-size: 18px;
    line-height: 23px;
    padding-top: 15px;
    margin-bottom: 30px;
}
#team .team-box-last ul{
    padding-left: 15px;
}
#team .team-box-last ul li{
    font-size: 18px;
    font-weight: 500;
}
#team .team-box-last ul li{
    list-style: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- T E A M   S E C T I O N -->
<section id="team" class="no-padding">
    <div class="container-fluid">

        <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 text-center">
                <h1><span class="orange">[ </span>Meet Our Team<span class="orange"> ]</span></h1>
                <p>A perfect blend of creativity and technical wizardry.</br>The best people formula for great websites!</p>
            </div>
        </div>

        <div class="row no-gutter">

            <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4" id="getheight" >
                <a class="team-box" rel="" href="https://free4kwallpapers.com/uploads/originals/2015/07/13/natur-hintergrundbilder-09-2012-269-2.jpg" title="">
                    <img src="https://free4kwallpapers.com/uploads/originals/2015/07/13/natur-hintergrundbilder-09-2012-269-2.jpg" class="img-responsive" alt="">
                    <div class="team-box-caption">
                        <div class="team-box-caption-content">
                            <div class="name">
                                Full Name
                            </div>
                            <div class="position">
                                Position
                            </div>
                        </div>
                    </div>
                </a>
            </div>

            <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
                <a class="team-box" rel="" href="img/team/2.jpg" title="">
                    <img src="https://free4kwallpapers.com/uploads/originals/2015/07/13/natur-hintergrundbilder-09-2012-269-2.jpg" class="img-responsive" alt="">
                    <div class="team-box-caption">
                        <div class="team-box-caption-content">
                            <div class="name">
                                Full Name
                            </div>
                            <div class="position">
                                Position
                            </div>
                        </div>
                    </div>
                </a>
            </div>

            <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
                <a class="team-box" rel="" href="img/team/3.jpg" title="">
                    <img src="https://free4kwallpapers.com/uploads/originals/2015/07/13/natur-hintergrundbilder-09-2012-269-2.jpg" class="img-responsive" alt="">
                    <div class="team-box-caption">
                        <div class="team-box-caption-content">
                            <div class="name">
                                Full Name
                            </div>
                            <div class="position">
                                Position
                            </div>
                        </div>
                    </div>
                </a>
            </div>

            <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
                <a class="team-box" rel="" href="img/team/4.jpg" title="">
                    <img src="https://free4kwallpapers.com/uploads/originals/2015/07/13/natur-hintergrundbilder-09-2012-269-2.jpg" class="img-responsive" alt="">
                    <div class="team-box-caption">
                        <div class="team-box-caption-content">
                            <div class="name">
                                Full Name
                            </div>
                            <div class="position">
                                Position
                            </div>
                        </div>
                    </div>
                </a>
            </div>

            <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
                <a class="team-box" rel="" href="img/team/5.jpg" title="">
                    <img src="https://free4kwallpapers.com/uploads/originals/2015/07/13/natur-hintergrundbilder-09-2012-269-2.jpg" class="img-responsive" alt="">
                    <div class="team-box-caption">
                        <div class="team-box-caption-content">
                            <div class="name">
                                Full Name
                            </div>
                            <div class="position">
                                Position
                            </div>
                        </div>
                    </div>
                </a>
            </div>

            <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
                <a class="team-box" rel="" href="img/team/6.jpg" title="">
                    <img src="https://free4kwallpapers.com/uploads/originals/2015/07/13/natur-hintergrundbilder-09-2012-269-2.jpg" class="img-responsive" alt="">
                    <div class="team-box-caption">
                        <div class="team-box-caption-content">
                            <div class="name">
                                Full Name
                            </div>
                            <div class="position">
                                Position
                            </div>
                        </div>
                    </div>
                </a>
            </div>

            <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
                <a class="team-box" rel="" href="img/team/7.jpg" title="">
                    <img src="https://free4kwallpapers.com/uploads/originals/2015/07/13/natur-hintergrundbilder-09-2012-269-2.jpg" class="img-responsive" alt="">
                    <div class="team-box-caption">
                        <div class="team-box-caption-content">
                            <div class="name">
                                Full Name
                            </div>
                            <div class="position">
                                Position
                            </div>
                        </div>
                    </div>
                </a>
            </div>

            <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
                <a class="team-box" rel="" href="img/team/8.jpg" title="">
                    <img src="https://free4kwallpapers.com/uploads/originals/2015/07/13/natur-hintergrundbilder-09-2012-269-2.jpg" class="img-responsive" alt="">
                    <div class="team-box-caption">
                        <div class="team-box-caption-content">
                            <div class="name">
                                Full Name
                            </div>
                            <div class="position">
                                Position
                            </div>
                        </div>
                    </div>
                </a>
            </div>

            <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 sameHeight">
                <div class="team-box">
                    <div class="team-box-last">
                      <div class="t">
                        <h3>Want to join our team?</h3>
                        <p>We’re always looking for talented designers, developers, project managers and anyone who’s driven and has a passion for the digital industries.
                        </p>
                        <ul>
                            <li><a href="#">Check our jobs page</a></li>
                            <li><a href="mailto: info@squares.com">Send us your CV</a></li>
                        </ul>
                        </div>
                    </div>
                </div>
            </div>

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

I also included resize option to tell how you can handle automatic height size.

Please feel free to change my code and make that nice and compatible with your requirement.

Majid
  • 2,507
  • 2
  • 19
  • 18
  • Hi Majid! Thanks for your reply. Your code works well for itself and for my 'Team' section but it influences the other sections of my HTML document. It is very likely because my code is not written exactly as it should be (since I am rookie) so I think the only solution is to change my design and throw out this last box. I thought the solution is very simple but I see now it is quite tricky. Thanks anyway for your help and work submitted! Appreciate it very much. – C. Felipe Oct 07 '16 at 18:05