I have a container which has 40px of padding. Inside of that container I have an image and text.
I am trying to keep the image and the text in sync. If I resize the window, my image gets resized automatically, and I am trying to use units "vw" to keep my text in sync with the image, but it's not working as I would like to. The padding is conflicting somehow, but I am not sure what the correct solution would be.
Here is my simple example:
.main {
padding-left: 20px;
padding-right: 20px;
background-color: white;
position: relative;
}
img {
width: 100%;
}
.text {
font-size: 6.8vw;
position: absolute;
left: 20%;
top: 12%;
}<body>
<div class="main">
<img src="http://screenshots.chriseelmaa.com/temp/d_slider_1_1_jpg__1918×880__1F40F570.png" />
<span class="text">YOUR SHAPE.</span>
</div>
</body>JSFiddle: https://jsfiddle.net/zn4odjrc/
As you can see, if you drag the browser window very small, and very big, the text is moving out of sync from the image. How should I handle the fixed margin in the calculations?
I've tried crazy stuff like font-size: calc(3vw - 40px), but no luck.
//edit:
with the help of Nils, I managed to pin down line-height & font-size and get this result:
https://jsfiddle.net/zn4odjrc/6/
I am almost satisfied with the result, however I don't understand why the first letter is not anchored, it moves quite a lot when you minimise browser really small / big.
As you can see, the top & line height seems to be fixed correctly. I don't care about letter-spacing right now, however it's not fixed on horizontal axis, I suspect it's because of left: 20%, which should be more a long of the lines of left: calc(20px + (100% - 40px) * 0.3)