0

On my website I have 3 bootstrap columns and each has a photo at the end. The problem is that the titles have different lengths and because of that when I resize the browser (at 1100px width) one of the pictures and the paragraph above it shift a little bit lower then the other 2. Is it possible to align the photos and pragraphs at the bottom and the title at the top?

Here is a JsFiddle of the problem I have

I don't now why but in JsFiddle the columns are all in one column and not multiple (like on a mobile device) but maybe if you save it and then open it in your browser you can see the problem.

HTML:

<div class="container-fluid">
<div class="row ">
<div class="col-md-4 column">
  <center>
    <h1>Babababababababababababababa</h1>
    <p>2013 - Now</p>
    <div>
      <div class="container-images"> <img class="image" src="https://iso.500px.com/wp-content/uploads/2016/05/stock-photo-93725859-1500x1000.jpg">
        <div class="over">
          <p class="title">aaa</p>
          <p class="rayal">aaaaaa</p>
        </div>
      </div>
    </div>
  </center>
</div>
<div class="col-md-4 column">
  <center>
  <h1>Bababababababababababababababababa</h1>
  <p>2009 - 2013</p>
  <div class="container-images"> <img class="image" src="https://iso.500px.com/wp-content/uploads/2016/05/stock-photo-93725859-1500x1000.jpg">
    <div class="over">
      <p class="title">aaa</p>
      <p class="rayal">aaaaa</p>
    </div>
    </center>
  </div>
  <div class="col-md-4 column">
    <center>
    <h1>Babababababababababababababab</h1>
    <p>2007 - 2009</p>
    <div class="container-images"> <img class="image" src="https://iso.500px.com/wp-content/uploads/2016/05/stock-photo-93725859-1500x1000.jpg">
      <div class="over">
        <p class="title">aaa</p>
        <p class="rayal">aaaaa</p>
      </div>
      </center>
    </div>
  </div>
</div>

CSS:

.container-images {
  height: 300px;
  width: 75%;
  overflow: hidden;
  display: flex;
  /*  align-items: center;*/
  justify-content: center;
  position: relative;
  border-radius: 100px;
}

.image {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 1;
  background-size: cover;
  border-radius: 100px;
  display: block;
  float: left;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  margin-bottom: 50px;
}

.over {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  z-index: 2;
  background: rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease-in-out;
  border-radius: 100px;
}

.title {
  margin-top: 100px;
  color: white;
  transition: all 0.5s ease-in-out;
  font-family: RobotoSlab-Regular;
  opacity: 0;
}

.rayal {
  opacity: 0;
  color: white;
  transition: all 0.5s ease-in-out;
  font-family: RobotoSlab-Regular;
}

.over:hover {
  background: rgba(0, 0, 0, 0.5);
}

.over:hover .title {
  margin-top: 0;
  opacity: 1;
}

.over:hover .rayal {
  opacity: 1;
}
Sanjeev Kumar
  • 3,113
  • 5
  • 36
  • 77
Udarnicus
  • 67
  • 1
  • 3
  • 8

1 Answers1

0

This is a good example for flexbox.

Here's an updated example of your plunker:

https://jsfiddle.net/eqcyyae9/9/

A few notes on this:

  1. I removed your <center> tags. These are depreciated, and it's not a good practice to use them (as described here). The same effect can be achieved using the Bootstrap center-block CSS class.
  2. I removed the flexbox properties on your container-images class. The centering you were doing in that case is handled by center-block, and as a personal preference I only use Flexbox when necessary so my CSS degrades as gracefully as possible for older browsers.
  3. I added a container-content class which does have flexbox on it. Using the space-between attribute with the flex-direction: column allows your content to take up the designated space (570px in this example). Your header will always stick to the top, and your image will stick to the bottom and any extra space will end up in-between (thus, space-between). There's a really good article on this here if you have more interest in looking into it.

As a side note, plunker asks that you add all file dependencies to the "External Resources" section rather then directly to the HTML. That's why you weren't seeing your Bootstrap styles come through.

Community
  • 1
  • 1
sammyray
  • 89
  • 5
  • I've tried your example but on my website the columns are all floating left and the pictures have all diffrent sizes and the text is overlapping. I copied the same html and css but somehow it's not working. Do you have a private E-mail address so I can contact you? – Udarnicus Aug 26 '16 at 06:39
  • Hey Udarnicus, if there were any way to privately share my email I would do so, but Stack Overflow doesn't have that kind of functionality. In any case, SO wants everyone to benefit from an answer, so that's probably for the best. If you update your example plunker with your actual code I'd be happy to help. – sammyray Aug 26 '16 at 12:38
  • Hey Sammyray, I've tried it a second time and this time I copied the code right. It worked perfect! The only problem I have is that the the section I had under this education section aren't visible anymore. I think the container-content is doing this. The sections have the hight set to auto but also when I set it to 100% nothing changes- – Udarnicus Aug 29 '16 at 07:24
  • Hi @Udarnicus, So I tried to recreate the situation you described. Flexbox can certainly mess up Bootstrap layouts, but in this case I'm not sure if that's what's creating your problem. I updated the fiddle here:https://jsfiddle.net/eqcyyae9/11/ and I was able to add a new row without any issues. Definitely make sure to start a new bootstrap `.row` in your next section. The row provides a clearfix, and since all the bootstrap columns are floated this ensures that your new section renders correctly. – sammyray Aug 30 '16 at 17:46
  • Hey Sammyray, I double checked my code and found a little mistake. Your code works perfectly! Thank you ! – Udarnicus Aug 31 '16 at 07:25