Submitted over 3 years ago

Html & CSS using flexbox and picture tag

Vatsal Singh•240

@vatsalsinghkv

Preview site View code

This is a solution for...Stats preview card component

HTML
CSS

1newbie

Design comparison

SolutionDesign

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?

Community feedback

shiva santosh jana•375
@santu369Posted over 3 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 🙌
1
Vatsal Singh•240
@vatsalsinghkvPosted over 3 years ago
Thank you so much brother. It's fixed as I changed img tag's to display: block from display: inline-block
0
Lasse Holm Nielsen•20
@Kanonkongen-dkPosted over 3 years ago
Hi Vatsal,

instead of setting a height and width, try this.

right: 0;

bottom: 0;

That worked for me.

Best regards Lasse
0
Vatsal Singh•240
@vatsalsinghkvPosted over 3 years ago
I tried this doesn't work. width = 100%, height = 100% is same as bottom = 0, right = 0
0

Please log in to post a comment

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