Make responsive text relative to responsive image?

Question

I'm trying to make an image responsive, and have the text also be responsive, but align in a relative manner so it matches up and doesn't ruin the output.

This is my html:

.checks { 
  position: relative; 
  display: inline-block;
  height: auto;
  max-width: 50%;    
}



.competitive {
  position: absolute;
  display: inline-block;
  bottom: 80%;
  font-family: 'museo_slab500';
  font-size: 150%;
  color: #fff;
  padding: 0 20px;
  width: 50;
  line-height: 150%;
}

<div class="checks">
  <img src="http://jqlconsulting.com/wp-content/uploads/2015/06/forcheckmarks2-Converted.png" alt="" style="max-    width:100%"/>
  <h2 class="competitive"><span>3 Tiered Quality Review Process</h2></span>
</div>

What am I doing wrong?

Answer 1

You can make image responsive by using '%' like 100% or etc.

But you can't do same with text to make it responsive.

You need to use units like 'em' or 'rem' instead of '%' or 'px' to make text responsive.

And btw 16px = 1em or 1rem. For more info search further about css units 'rem' and 'em'.

So you should use:

font-size: 1rem; 

//or 

font-size = 1em;

---

.competitive {

    position: absolute; // use relative instead of absolute to make class'competitive' relative to parent.
    display: inline-block;
    bottom: 80%;
    font-family: 'museo_slab500';
    font-size: 3em;  // Or use 'rem' to make text responsive.
    color: #fff;
    padding: 0 20px;
    width: 50;
    line-height: 150%;
}

Answer 2

I made this jsfiddle example to demonstrate your problem as I understand it. Since your question is too vague to understand, this might not be the solution you want. Also, this is not a full answer, just something to get you started.

I think what you want is to keep the text 3 Tiered Quality Review Process to keep on the top maroon image even if the window size is changed.

Alert me if you dont want this solution. And please change your question too for other users to understand it properly.

The answer as your see in the jsfiddle is this javascript which resizes your competitive container to your checks div.

window.onresize = resizeText;

function resizeText()
{
    var heightPercentage = 10; //Make the height 10% of parent
    var widthPercentage = 100; //Make the width 100% of parent i.e. full width

    var parentHeight = $(".checks").height();
    var parentWidth = $(".checks").width();

    $(".competitive").css("height", parentHeight * (heightPercentage / 100) + "px");
    $(".competitive").css("width", parentWidth * (widthPercentage / 100) + "px");
}

Then I included a bunch of these lines @media all and (min-width: 50px) { body { font-size:5px; } } in your css to adjust the font-size based on the window size. You can play around with this and add more of these to cover all possible cases. Note this depends on how much is your window's max and min height/width.

Also check this answer which closely relates to your problem (IMO)

I also suggest strongly to use bootstrap for any responsive css.

Answer 3

.checks { 
  position: relative; 
  display: inline-block;
  height: auto;
  max-width: 50%;    
}



.competitive {
  position: absolute;
  display: inline-block;
  bottom: 80%;
  font-family: 'museo_slab500';
  font-size: 150%;
  color: #fff;
  padding: 0 20px;
  width: 50;
  line-height: 150%;
}

<div class="checks">
  <img src="http://jqlconsulting.com/wp-content/uploads/2015/06/forcheckmarks2-Converted.png" alt="" style="max-    width:100%"/>
  <h2 class="competitive"><span>3 Tiered Quality Review Process</h2></span>
</div>