Skip to content
Submitted about 2 years ago

media screen responsiveness using css grid

Emmanuel•700
@otizgit
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Product preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

I found the responsiveness kind of difficult

I'm unsure if this site is going to look good on a wider desktop screen like that of a width of over 1500px

Community feedback

  • Leonardo Mancilha Machado•100
    @LeonardoMancilhaPosted about 2 years ago

    Hello, Emmanuel! Your website is working well it looks good on a broader desktop screen like that of a width of over 1500px. However, when the website achieves max-width: 700px is created a horizontal bar because of the height right here:

    @media screen and (max-width: 700px) .photo img { /* height: 450px; */ border-top-left-radius: 9px; border-top-right-radius: 9px; border-bottom-left-radius: 0; }

    You shall put height: 427px;

    @media screen and (max-width: 700px) { .photo img { height: 427px; border-top-left-radius: 9px; border-top-right-radius: 9px; border-bottom-left-radius: 0; } }

    And after everything is going to be ok.

    Marked as helpful
    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