CODEWITHSUNDEEP
htmlcss
Erti-Chris Eelmaa
Erti-Chris Eelmaa

Reputation: 26318

Fixed margin and VW (viewport width) units conflict

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)

Upvotes: 14

Views: 7380

Answers (8)

Abhishek Pandey
Abhishek Pandey

Reputation: 13568

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.sstatic.net/ktEew.png" />
    <span class="text">YOUR SHAPE.</span>
  </div>
</body>

Updated fiddle with Times new roman font used in image

Upvotes: 11

Arel Sapir
Arel Sapir

Reputation: 136

Quick Solution: its all about the starting point and right font.

Explanation: after a long review of the code i can say that the solution given by @Abhishek Pandey is a good solution. the thing is though, you need to find to correct begining point of the text and use the exact same font with font-family being correct and font-weight being correct. check it because they dont seem to fit.

Upvotes: 2

dycodingcoda
dycodingcoda

Reputation: 53

Here is my answer, i don't know if this exactly what you want but maybe can give an insight.
I change the .main to position to absolute so that your text will resize base on main div

.main  {
  position: absolute;
  padding-left: 20px;
  padding-right: 20px;
  background-color: white;
}

img {
  display: block;
  width: 100%;
}

.text {
  display: block;
  font-size: calc((100vw - 40px) * 0.072);
  line-height: calc((100vw - 40px) * 0.082);
  margin-left: 18%;
  margin-top: -17%;
  
}
<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>

Upvotes: 2

Julian Hilbers
Julian Hilbers

Reputation: 127

The edited version runs nearly fine but all values are relative excepting the padding. Thats the reason why the positions are changing on small or large resolutions.

Change padding to this:

.main  {
  padding-left: 3%;
  padding-right: 3%;
}

https://jsfiddle.net/zn4odjrc/8/

Upvotes: 2

Manoj Balakonda
Manoj Balakonda

Reputation: 138

Instead of using .text{ /* css code */ }, use 

<style type="text/css">
.text {
  left: 0;
  font-size: 6.8vw;
  position:absolute;
  text-align:center;
  top: 12%;
  width: 100%
}
</style>

Upvotes: 3

user7159290
user7159290

Reputation:

You don't need to make the shadow of text in the image. You can do it with CSS. Edit your image and remove the shadow then apply this CSS to your text:

see this

https://codepen.io/prateek89760/pen/PKRKeQ

.main {
  padding-left: 1vw;
  padding-right: 1vw;
  background-color: white;
  position: relative;
}

img {
  width: 100%;
}

.text {
text-shadow: 6px 6px #ccc;
  font-size: 90px;
  position: absolute;
  left: 18.2%;
  top: 11%;
}


<img src="" />

<span class="text">YOUR SHAPE.</span>

Upvotes: 3

Nils R&#252;ckmann
Nils R&#252;ckmann

Reputation: 603

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

Upvotes: 3

user5700598
user5700598

Reputation:

Instead of using 6.8vw, use 6.8vmin.

https://jsfiddle.net/zn4odjrc/2/

Upvotes: 3

Related Questions