Skip to content
Submitted about 2 years ago

Product-preview-card-componentUsingFlexBox

Tauseef Ansari•20
@tausGit
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

hey community, it's my second newbie challenge from frontendmentor :D Do review my code and suggest me improvements for future challenges...

thanks a lot..

just deployed to netlify.. nothing new here

Community feedback

  • Abrosss•440
    @AbrosssPosted about 2 years ago

    Hello! You did a very good job! To split the sections (image and content) equally, i would set the width of both divs inside of the main container to 50%.

    .main-container div {width:50%;}

    Then remove the img height of 300px and add this instead (so the image fills its container entirely) :

    .image { max-width:100%; max-height:100%; object-fit: cover; }

    I hope it helps and good luck!

    Marked as helpful
    1
    Tauseef Ansari•20
    @tausGitPosted about 2 years ago

    @Abrosss thanks for the feedback ❤️💕

    1

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