CODEWITHSUNDEEP
htmlcsstwitter-bootstrapresponsive-design
Kuzma
Kuzma

Reputation: 711

Twitter Bootstrap 3 Text positioning over responsive images

I'm stuck with issue regarding text positioning over responsive images.

I have ribbon pictures with different sizes (mostly the width varies) Once the browser's window has been resized the text jumps out of the ribbon.

.first-block-first-ribbon-text-position{
   transform: translate(-15%, 60%);  /*Actually -15%, 40% works in my project*/
   color: #fff;
   font-weight: 700;
   font-size: 2.0vmin;         
}

For media queries I'm making in that way:

.second-block-second-ribbon{
  transform: translate(-15%, 60%); 
  color: #fff;
  font-weight: 700;
  font-size: 2.0vmin;         
}

Is it right approach in this way? Should I only fix the media-query or I it should be overwritten from the scratch?

Also I need that the text would be centered inside images.

Now I'm confused, because I've got a suggestion that all these approaches are wrong...

I need universal solution for different browser window sizes.

P.S. After the code update it seems that JSfiddle example works... But on production ribbons doesn't fix to right corner and text jumps our of it. (I could post a link to a live version)

I'm attaching the img how actually it should be rendered (Look at first part).

JSFiddle: https://jsfiddle.net/DTcHh/19252/

IMG: http://i79.fastpic.ru/big/2016/0412/25/d591b9e5a4ee75d82f9db7c609c81425.jpg

Upvotes: 2

Views: 306

Answers (1)

isherwood
isherwood

Reputation: 61056

Basically, you just have way too much going on. Why are you using the Bootstrap caption class? That adds some goofy styles. Then, what's with all the transforms?

I'd start with something very simple, and increase font sizes with media queries.

.ribbon {
    position: relative;
}
.ribbon img {
    width: 100%;
}
.photo-caption {
    position: absolute;
    top: 15px;
    right: 30px;
    bottom: 15px;
    left: 30px;
    color: #fff;
}

Demo

Upvotes: 1

Related Questions