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?

Your HTML is full of errors. You should correct your HTML, link to an image that is visible and put this onto something like jsfiddle so we can see what's going on — Toni Leigh, Jun 11 '15 at 17:12

score 0 · Answer 1 · answered Jun 11 '15 at 17:54

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%;
}

score 0 · Answer 2 · edited May 23 '17 at 11:58

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.

This is my first time on stack. basically what i need is the text to stay in the maroon and never go to another color, and to never overlap with the check. i will end up having multiple lines of text. — mysizelearner, Jun 12 '15 at 18:49
@mysizelearner okay i understand a little bit what you want. I will help you if I can. So what do you mean by responsive design. Is your image getting resized? If yes, then is it being resized in every possible manner (different width and height) or only in some way like large, medium, small, etc. If the case is latter, then its better to just photoshop your image in three different variations and be done with it. If former, then tell me, is the image getting resized or the window, and image resizes with the window ? — Rash, Jun 12 '15 at 20:03

score 0 · Answer 3 · answered Nov 30 '20 at 03:17

.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>

Make responsive text relative to responsive image?

3 Answers3