Text to resize with CSS shape

Question

I have some text inside a parallelogram, the problem is that when I resize the window the text loses all its properties, I have tried vw, vh, em, pt, rem and px Also I have tried with @media screen and (min-width: 320px;) But nothings seems to work, currently this is what I have so far, I hope you could help me.

 .paralelo { margin-top: 8%; margin-left: 0%; padding-left: 0; text-align: right; width: 48%; height: 50%; max-height: 10px; border-top: 50px solid #c5027f; border-right: 30px solid #FFf; } .who { font-family: "Montserrat","Helvetica Neue",Helvetica,Arial,sans-serif; font-size: 3em; font-weight: 400; color: white; margin-top: -21.5%; margin-right: 12px; } 

 <div class="paralelo"> <p class="who">Servicios</p> </div> 

Answer 1

Try with using position like:

 .paralelo { position: relative; /* -- add this line */ margin-top: 8%; margin-left: 0%; padding-left: 0; text-align: right; width: 48%; height: 50%; max-height: 10px; border-top: 50px solid #c5027f; border-right: 30px solid #FFf; } .who { position: absolute; /* -- add this line */ top: -100px; /* -- add this line */ right: 12px; /* -- add this line */ font-family: "Montserrat","Helvetica Neue",Helvetica,Arial,sans-serif; font-size: 3em; font-weight: 400; color: white; /* margin-top: -21.5%; -- remove this line */ /* margin-right: 12px; -- remove this line */ } 

 <div class="paralelo"> <p class="who">Servicios</p> </div> 

here is jsfiddle so you can resize screen

read more about how to use position here

Update after comment

Here is the example with vw so if you resize the screen it will change all sizes accordingly https://jsfiddle.net/5x7p6fsr/1/