Skip to content
Submitted over 2 years ago

Am I that bad????!!!!

GIGACHAD•230
@Khalid-debugg
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Stats preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Is it fine to give the image fixed dimensions? Is it fine to give maximum dimensions for containers.. is this the best practice? Is my solution responsive? why when I give the purple div width 100% it doesn't take the full width of image div? was there any solution to make the image look purple rather than making purple div? why I should enter dev tools and select mobile device to make the media query work? Please let me know, and sorry for the spaghetti code.

Community feedback

  • Lucas 👾•104,340
    @correlucasPosted over 2 years ago

    👾Hello Gigachad! Congrats for this giga solution!

    Answering your question:

    Your solution is responsive and works fine, but there's a little issue with the stats section note that when your component is scaling down, the bottom information start to crop due the overflow: hidden; inside the class .info.

    To make your solution eve more GIGA, you can apply the proper overlay effect using mix-blend-mode and use the <picture> tag to wrap both desktop and mobile images all inside the html, this tag allows you to change the photo in base of the screen/device.

    To apply the overlay effect on the image:

    img {
mix-blend-mode: multiply;
opacity: .8;
}

    Hope it helps GIGA, keep it up!

    Marked as helpful
    1
    GIGACHAD•230
    @Khalid-debuggPosted over 2 years ago

    @correlucas Bro you are so great, keep dominating the site <3

    1
    Lucas 👾•104,340
    @correlucasPosted over 2 years ago

    @Khalid-debugg thanks Giga, keep improving!

    1
  • Bruno e Sousa Alencar•180
    @BrunoeSousaAlencarPosted over 2 years ago

    Acho que seria muito útil você estudar media query, sua pagina não está muito responsiva.

    0
    GIGACHAD•230
    @Khalid-debuggPosted over 2 years ago

    @BrunoeSousaAlencar I guess so.

    0

Please log in to post a comment

Log in with GitHub

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