Kevin Powell - Community•3w ago

Positioning text with absolute with responsiveness

Heyo, I got a card-title that I want to be placed at a certain spot on the page and it needs to be responsive. I thought of using position absolute, since it needs to be on top of a masked image. Here's a video how it's acting right now and the necessary code:

.project-card {
    position: relative;
}

.project-card-title {
    position: absolute;
    z-index: 2;
    top: 0%;
    right: 7.5%;

    font-family: var(--ff-secondary);
    font-weight: var(--fw-bold);
}

.project-image {
    -webkit-mask-image: url('/assets/images/project-mask.svg');
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;

    mask-image: url('/assets/images/project-mask.svg');
    mask-size: contain;
    mask-repeat: no-repeat;
}

.project-card {
    position: relative;
}

.project-card-title {
    position: absolute;
    z-index: 2;
    top: 0%;
    right: 7.5%;

    font-family: var(--ff-secondary);
    font-weight: var(--fw-bold);
}

.project-image {
    -webkit-mask-image: url('/assets/images/project-mask.svg');
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;

    mask-image: url('/assets/images/project-mask.svg');
    mask-size: contain;
    mask-repeat: no-repeat;
}

14 Replies

Hidi_OP•3w ago

Perhaps position absolute isn't gonna save my life for this occasion. So any other solution that may work is ofcourse welcome! 😄

Mannix•3w ago

maybe try using a different unit than % for the right property 😉

Chris Bolson•3w ago

As far as I can tell it looks OK in the video regarding positioning (though I agree with Mannix that % is possibly not the best unit for this). The only thing that it might need is increasing the font-size. Clamp would be perfect for this.

ἔρως•3w ago

this is an use case where making the images into svgs isnt a bad idea svg can very easily scale the size of the text to fit within a width

Hidi_OP•3w ago

my mask is a svg, but my project images are png as we speak would changing the pngs to svgs help for this?

Hidi_OP•3w ago

This is how I imagine it looking at let's say 768px which has a right of 2.5rem and a font-size of 2.5rem. At 320px it looks good with a right of 1.5rem and a font-size of 1rem

Chris Bolson•3w ago

Epic is referring to converting the text "Projecten" to an SVG so that it will scale according to the available space.

Hidi_OP•3w ago

Ah I see

Chris Bolson•3w ago

However personally I would try using clamp first, it should be fairly simple to play around with the values to get it to fit as this is a single word and within a limited space.

Hidi_OP•3w ago

How would you clamp this? I can't really get the middle value to work font-size: clamp(1rem, 2.5vw, 2.5rem); nvm I got it to work This works perfectly fine, just clamped the right and font-size and changed them inside some media querries for bigger screen sizes Thanks!

ἔρως•3w ago

no, no, im talking about the whole thing

Hidi_OP•3w ago

Like just get the image as 1 svg, don't bother about masking it and stuff?

Chris Bolson•3w ago

ah, ok, sorry (again). I miss-understood.

ἔρως•3w ago

yup, just one svg for everything

Gaming

Programming

Positioning text with absolute with responsiveness