0

I have an image covering the top half of my page, with width 100%, so it shrinks and expands responsively when the browser is resized.

I also have some text on this image, in the bottom left corner ('software architecht'). It's wrapped in a <div> and currently uses padding-top: 38% to hover at that height big

I need the text to shrink in size as well, as the browser is resized. And secondly, it should stay in that exact corner of the image. So that it looks exactly the same in proportion, only smaller. What I'm currently getting is this:

small

Is there any reliable way to achieve this?

Marco Prins
  • 7,189
  • 11
  • 41
  • 76
  • http://stackoverflow.com/questions/15649244/responsive-font-size – Nick Jun 12 '14 at 15:49
  • défined a number of pixel not a "%" – Hann Jun 12 '14 at 15:51
  • The image and text should be contained in the same container and the text should be positioned absolutely overlaying the image. Defining a `top` and `left` for the text 'software...' should be able to positioned it correctly. Currently it looks like the text is getting padded based on the window which is why it is so low on the page. Show us some code or put it in a http://jsfiddle.net as for text size, you can either use media queries and do it yourself or maybe there is a plugin – Huangism Jun 12 '14 at 15:54
  • Use em font sizes to create responsive text sizes. – Alexander Kludt Jun 12 '14 at 15:54

1 Answers1

0

To resize the text in proportion to the window size, try setting your font size in vw units.

rdoyle720
  • 2,940
  • 3
  • 17
  • 19