Skip to content
Submitted about 2 years ago

Card Responsive

p-rod•190
@py-rod
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

Any suggestions are welcome :)

Community feedback

  • バレンタイン 😈•64,170
    @VCaramesPosted about 2 years ago

    Congrats @py-rod on completing this challenge!

    To clean you your code and make semantically correct, you'll want to do the following to you code:

      <body>
      <article>
        <picture
          ><source media="(min-width: )" srcset="" sizes="" />
          <img src="" alt="" />
        </picture>
        <div class="main-content">
          <span></span>
          <h1></h1>
          <p></p>
          <div class="prices">
            <p>Current Price</p>
            <p>Old Price</p>
          </div>
          <button></button>
        </div>
      </article>
    </body>

    With the new code setup, you'll notice that I've wrapped everything in a <article> element, this is because this card is a product card. Heres a link with more info on it: LINK

    For the images that serve a purpose and not just decorative, its best practice to use the <picture> element. Using this makes your code responsive, allowing your image to change from mobile and desktop (and vice-versa). Heres a link with more info on it: **LINK

    Happy Coding!

    Marked as helpful
    2
  • Lucas 👾•104,340
    @correlucasPosted about 2 years ago

    👾Hi @py-rod, congrats on completing this challenge!

    You’ve done really good work here putting everything together, I’ve some suggestions to improve the design:

    I saw that you’ve used flexbox to place the content and create the layout.

    I think the best way to build this component with two columns is by using GRID LAYOUT since it is simpler to manage the columns and then create the media query for mobile. Here’s the steps to create it with grid create the main block to hold all the content (you can use <main> to wrap), set its width as max-width: 900px (it's the container size) and display: grid / grid-template-column: 1fr 1fr(this means that your component will have two columns with 50% of the container width each thats 450px). To manage the column with the text use flexbox and gap to give it the spacing between the texts or use padding-bottom to separate them.

    Then to create the mobile version, all you need to do is to change the container flow vertically with grid-template-column: 1fr.

    ✌️ I hope this helps you and happy coding!

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