Skip to content
OverviewSolutions
0
Comments
1
Oyero Habib
@oyerohabib

All comments

  • Liam Hallow•40
    @LiamHallowSubmitted about 2 years ago

    I'll gladly accept any corrections. Used so many paddings to break the words into the next lines and I had trouble scaling the images. Tuff!

    Product Card Review

    3
    Oyero Habib•20
    @oyerohabibPosted about 2 years ago

    Nice work.

    However, can you clarify why you used, "position: absolute;" for your body?

    Also, in your media query, you don't need to your add the entire CSS attributes for the class, you only need to add the new changes.

    An instance here is, for the container class, the general usage was,

    .container {
    width: 350px;
    height: 600px;
    background: var(--White);
    display: flex;
    flex-direction: column;
    overflow: none;
    border-radius: 1rem;
    box-shadow: 0 5px 10px -3px #303030;
}

    and in your media query, you had it as,

    @media screen and (min-width: 600px) {
    
    .container{
        width: 700px;
        height: 400px;
        background: var(--White);
        display: flex;
        flex-direction: row;
        overflow: none;
        border-radius: 1rem;
        box-shadow: 0 5px 10px -3px #303030;
    }
}

    I think just having the differences in your media query is sufficient.

    @media screen and (min-width: 600px) {
    .container {
        width: 700px;
        height: 400px;
        flex-direction: row;
    }
}

    This here would be sufficient.

    So you no longer need background, display, border-radius, or box-shadow since you are not making any changes to their values. And that would ultimately keep your CSS even shorter.

    Marked as helpful
    0