Kevin Powell - Community•2mo ago

centering scalable text

Hey, i have a design where some decorative text sits behind some content. The decorative text is supposed to stay centered however i can't quite figure out how to achieve this on smaller screen sizes (see images for what i'm attempting and what's happening) The text is supposed to overflow the sides on smaller sizes and have that hidden by the container. I have it figured out on desktop, though that method probably won't be fit for the mobile design due to any overlap making the content do the same as they share the same grid cell. the problem is just scaling it down. My initial thought was using position absolute for the decorative text however since it gets taken out of the doc flow, it has the potential to overlap the header and footer. I'd appreciate any help learning a method for this sort of thing, thank you in advance. https://codepen.io/deerCabin/pen/ExBqoJg

CodePen

text design

...

2 Replies

Chris Bolson•2mo ago

I would use position absolute on this and center it within the parent using grid or whatever method you prefer to center a div.

.heading-mega {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;

  font-size: clamp(18rem, 13.9791rem + 20.1047vw, 30rem);
  line-height: 1;
  filter: blur(5px) brightness(0.2);
  z-index: -1;
}

.heading-mega {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;

  font-size: clamp(18rem, 13.9791rem + 20.1047vw, 30rem);
  line-height: 1;
  filter: blur(5px) brightness(0.2);
  z-index: -1;
}

(ah, don't forget to add position: relative; to the parent element) You could also use a pseudo element to do this and avoid having this decorative element in the HTML.

.overlap::before{
  content: '404';
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  font-size: clamp(18rem, 13.9791rem + 20.1047vw, 30rem);
  line-height: 1;
  filter: blur(5px) brightness(0.2);
  z-index: -1;
}

.overlap::before{
  content: '404';
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  font-size: clamp(18rem, 13.9791rem + 20.1047vw, 30rem);
  line-height: 1;
  filter: blur(5px) brightness(0.2);
  z-index: -1;
}

ah, I have just re-read your original post and you are concerned that using postion absolute might overflow onto the parent. You could either ensure that there is sufficient padding/margin or use an overflow: hidden (or clip) on the parent container.

snxxwyy•2mo ago

i just gave your solution a try and that's actually no longer an issue, although it does overlap in places, the z-index places it behind the landmarks anyway. I had another attempt a while ago where that was an issue but i most likely had something unecessary in there making that happen. Thanks chris.

Gaming

Programming

centering scalable text