0

I'm trying to add text in a pseudo element :before the body. It seems however I am forced to set the font-size which means it isn't responsive.

How can I force the content:'404' to be responsive when changing the browser dimensions? I'm I absolutely limited to SVG images?

Result I'm looking for is the 404 text behind content:

404.

MPaul
  • 2,553
  • 3
  • 20
  • 34
  • You can set the font-size to be em. It's more responsive than pixels. Have you tried that? – cbloss793 Jan 17 '18 at 19:14
  • Yes I have, however if I do that I'll have to constantly modify the size with each responsive break point. This also doesn't take the height into account – MPaul Jan 17 '18 at 19:17

1 Answers1

2

have you tried with "vw" - Viewport-percentage lengths

body::before {
    content: "404";
    font-size: 50vw;
    position: absolute;
    left: 50%;
    transform: translate(-50%, -25px);
}
benny-ben
  • 422
  • 5
  • 15
  • Ouhhh, very close. The `vw` unit is indeed the correct unit, I just need to make it remain vertically centered when not changing the browser's height – MPaul Jan 17 '18 at 19:31
  • I added `top:50%` and modified your translate to `transform:translate(-50%,-50%)` and it's working now. Thanks a bunch – MPaul Jan 17 '18 at 19:33
  • You're welcome @MPaul, glad for helping – benny-ben Jan 17 '18 at 19:42