Bootstrap, layout only works at small screen sizes

HTML & CSS
1

Hi all

I have a jsfiddle here - http://jsfiddle.net/7psczxog/5/

It’s just two blocks that contain an image and some text in two separate divs.

At smaller sizes the image and text sit on top of each other.

Each block also has a triangle that should site in the middle at the bottom of the block.

My problem is the blocks only work at smaller sizes when the image is on top of the text.

At larger sizes the block has no background color and the triangle moves to the top.

2

Hi,

You over-rode the clearfix with your triangle:)

Clearfix uses :after but you hijacked it for your triangle. You can use :before instead for your triangle.


.triangle-section:before{
  border-style: solid;
  border-width: 20px 20px 0 20px;
  border-color: red transparent transparent transparent;
  bottom: -20px;
  left: 50%;
  content: "";
  height: 0;
  margin-left:-20px;
  width: 0;
  position: absolute;
}