Submitted about 4 years ago

Html & CSS using flexbox and picture tag

Vatsal Singh•240

@vatsalsinghkv

A solution to the Stats preview card component challenge

Preview Code

Solution retrospective

I was facing some problems.

picture::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    background: var(--soft-violet);
    mix-blend-mode: multiply;
    width: 100%;
    height: 446px;
}

In this ::before selector, initially i made height = 100%, But I was getting image size (height) less than the picture tag, I couldn't figure out why, so I made height of the ::before equal to the height of the image.

Can anyone help me why I was having that height of image & picture tag problem?

Code

Please log in to post a comment

Community feedback

shiva santosh jana•375
@santu369
Posted about 4 years ago
Hi Vatsal,

By default, img element is displayed as inline-block. You can change it to display: block and add height: 100% or right: 0; bottom: 0; to picture::before, this should solve the problem you were facing.

Good job on finishing the challenge 🙌
Lasse Holm Nielsen•20
@Kanonkongen-dk
Posted about 4 years ago
Hi Vatsal,

instead of setting a height and width, try this.

right: 0;

bottom: 0;

That worked for me.

Best regards Lasse

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord