Kevin Powell - Community•2mo ago

santa hat to text how ?

1st image is BIG HAT for desktop mode and tab mode 2nd image is for Mobile mode. how can i give this hat to this text ? i have export it as svg in two files 1 is big and second is smol. this is for my own portfolio site as i'm still designing it so i want people to see that portfolio is under construction.

15 Replies

Hidi_•2mo ago

Can you not just have those images fully as images, not text with only the hat as an image? You can just use an alt text for people using screen readers. If you want to do that, just change the image in a media querry that has the width u want for mobile

snxxwyy•2mo ago

Wrap the 0 in a span and use position absolute for the hat

peterpumkineaterrOP•2mo ago

i didn't understand any of it please use english i have cold and my head is not working

Hidi_•2mo ago

body {
  height: 100%;
  margin: 0;
}

.not-found {
  background-image: url('not-found-big.svg');
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;

@media (max-wdith: 768px) {
  .not-found {
    background-image: url('not-found-small.svg');
  }
}

body {
  height: 100%;
  margin: 0;
}

.not-found {
  background-image: url('not-found-big.svg');
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;

@media (max-wdith: 768px) {
  .not-found {
    background-image: url('not-found-small.svg');
  }
}

I think this should work if you have 2 SVG-files. 1 for the big screens and 1 for the small screens. Obviously the SVG-files should contain both the text, santa hat and black background snxxwyy solution will also work ofcourse

peterpumkineaterrOP•2mo ago

Can’t i do text as text and santa hat as svg ?

Hidi_•2mo ago

That is possible, just more effort

peterpumkineaterrOP•2mo ago

Ohh damn i understood this now Please elaborate So where to put hat svg ? Inside the span ?

Hidi_•2mo ago

U will need to do with the span, takes more effort in my opinion

MarkBoots•2mo ago

https://codepen.io/MarkBoots/pen/BaXmyGE you'll have to play with the width/height and top/left to fit your own svg I use em-units so it scales with the current font-size

MarkBoots•2mo ago

peterpumkineaterrOP•2mo ago

damnn thanks mark you helped a lot before i did this

peterpumkineaterrOP•2mo ago

why is there

  position: relative;
  &::after{
    position: absolute;

  position: relative;
  &::after{
    position: absolute;

Alex•2mo ago

An element with position:absolute is positioned relative to the nearest positioned ancestor. Setting position:relative on the main element lets you position the pseudoelement relative to it; without it, it would be positioned relative to the root element, so it would be in the top left of the whole document rather than the span.

peterpumkineaterrOP•2mo ago

that clarify's it thanks i appriciate it. UPDATE : i finished that site and i will appriciate the help

Gaming

Programming

santa hat to text how ?