Question

I’m trying to make my caption-box the same size as my image, without losing the responsiveness of the flex-slider, any suggestions?

http://jsfiddle.net/bmBnF/10/

Mads K

Answer 1

I fixed it by making it an inline-block and using absolute positioning. This makes it so you don’t need to float it right anymore. Plus, I added the border-box thing, so your padding wouldn’t make the box too large. display:inline-block; and border-box together makes CSS positioning much easier in responsive design.

  .flex-caption {position:absolute;display:inline-block;min-height:100%;width: 26%; padding: 2%; margin: 0; background: rgba(0,0,0,.3); color: #fff; text-shadow: 0 -1px 0 rgba(0,0,0,.3); font-size: 14px; line-height: 18px;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box; }

There is a nice little tutorial on border-box here: http://css-tricks.com/box-sizing/