Menu
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)
832
The difference between using width: 100vw instead of width: 100% is that while 100% will make the element fit all the space available, the viewport width has a specific measure, in this case the width of the available screen, including the document margin.
sizes="100vw" means the image file is swapped out based on the total width of the viewport. sizes="(min-width: 48em) 800px, 100vw" means if the viewport width is >= 48ems the image file is swapped out based on its max width of 800px, otherwise the image file is swapped out based on the width of the viewport.
Viewport Height (vh). This unit is based on the height of the viewport. A value of 1vh is equal to 1% of the viewport height. Viewport Width (vw). This unit is based on the width of the viewport.
Setting The Viewport The width=device-width part sets the width of the page to follow the screen-width of the device (which will vary depending on the device). The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser.
It's hard to sync pixels with percentage (static with dynamic). every unit should be dynamic.
.main {
padding-left: 1vw;
padding-right: 1vw;
background-color: white;
position: relative;
}
img {
width: 100%;
}
.text {
font-size: 7.3vw;
position: absolute;
left: 18.2%;
top: 11%;
}<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>Updated fiddle with unknown font
Edit
I cannot find the font used in image provided by you, so I changed image's first para with Times new roman.
Now you can see it's bit easy to trace image with correct font family, although you need to manually trace the starting point of text.
.main {
padding-left: 1vw;
padding-right: 1vw;
background-color: white;
position: relative;
}
img {
width: 100%;
}
.text {
font-size: 7.3vw;
position: absolute;
left: 18.2%;
top: 11%;
font-family:
}<body>
<div class="main">
<img src="https://i.stack.imgur.com/ktEew.png" />
<span class="text">YOUR SHAPE.</span>
</div>
</body>Updated fiddle with Times new roman font used in image
143
You have to express the font-size not only by viewport width but also the padding. So the correct calculation would be something like: font-size: calc((100vw - 40px) * 0.072);.
Explanation: Your desired font size is relative to the width of the image, which can be expressed as fontSize = imageWidth * factor. The image width is defined as 100% of the container, but the container is 100% of the viewport minus 40px
21
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
