Hidi_ Posts - Answer Overflow

Hidi_

•Created by Hidi_ on 10/30/2024 in #front-end

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;
}

21 replies

KPCKevin Powell - Community

•Created by Hidi_ on 10/26/2024 in #front-end

SEO-friendly HTML structure example

Hey there! I got a quick question on structuring my HTML especially on heading-levels. I have a design with eyebrow headings (basically a subtitle but above the title) so the eyebrow will be a h3 and the title a h2. Is it fine to place the h3 eyebrow above the h2 title inside my HTML structure? Or do I bother to do the following, since it brings me more benefits then flaws?

<div class="test">
        <h2>This is a title</h2>
        <h3>This is an eyebrow subtitle</h3>
    </div>

<div class="test">
        <h2>This is a title</h2>
        <h3>This is an eyebrow subtitle</h3>
    </div>

.test {
    display: flex;
    flex-direction: column-reverse;
}

.test {
    display: flex;
    flex-direction: column-reverse;
}

117 replies

KPCKevin Powell - Community

•Created by Hidi_ on 10/23/2024 in #front-end

Fixing my layout from desktop to phone

24 replies

Gaming

Programming