Skip to content
Submitted almost 2 years ago

Product-preview with responsive display

yanuwardi•40
@startoverflows
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

Hello guys, please advice. I think my css file could be simplify, but I am struggling with padding and margin. I try to set media query with @media only screen and (min-width: 375px), but it does not work on Iphone 6/7/8 (display as desktop design), so I set to min-width 768px. I use Viewport resizer to check it.

Community feedback

  • Josh•320
    @Ao-chiPosted almost 2 years ago

    Hi~ Congrats on finishing this challenge!

    Some tips to make it better for both mobile and desktop versions.

    1. For the <html> and <body> elements, you could give it a height: 100%.
    2. To keep the card component always on center you can get rid of your widths and heights in your .wrapper class like this:
    .wrapper {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: var(--Cream);
    background-color: var(--Cream);
}
@media only screen and (min-width: 768px) {
  .wrapper {
    flex-direction: row;
  }
}

    For accessibility and usability here are some tips.

    • You can change your <div class="wrapper"> to <main class="wrapper". It will help screen readers and other assistive technologies understand the **structure and hierarchy ** of the content on the page.
    • Also you can replace <div> with headings such as <h1> to give emphasis on the main topic of the content. You could do this to your .preview class, like this" <h1 class="preview">Gabrielle Essence Eau De Parfum</h1>
    • For the Add to Cart you can remove the <h1> element to and just wrap the icon and the text inside a <button> like this:
    <div class="add-to-cart">
          <svg width="15" height="16" xmlns="http://www.w3.org/2000/svg">
            <path d="M14.383 10.388a2.397 2.397 0 0 0-1.518-2.222l1.494-5.593a.8.8 0 0 0-.144-.695.8.8 0 0 0-.631-.28H2.637L2.373.591A.8.8 0 0 0 1.598 0H0v1.598h.983l1.982 7.4a.8.8 0 0 0 .799.59h8.222a.8.8 0 0 1 0 1.599H1.598a.8.8 0 1 0 0 1.598h.943a2.397 2.397 0 1 0 4.507 0h1.885a2.397 2.397 0 1 0 4.331-.376 2.397 2.397 0 0 0 1.12-2.021ZM11.26 7.99H4.395L3.068 3.196h9.477L11.26 7.991Zm-6.465 6.392a.8.8 0 1 1 0-1.598.8.8 0 0 1 0 1.598Zm6.393 0a.8.8 0 1 1 0-1.598.8.8 0 0 1 0 1.598Z" fill="#FFF"></path>
          </svg>
          Add to Cart
</div>

    That's all! If you have anymore questions fell free to contact me. Happy Coding~

    Marked as helpful
    1
    yanuwardi•40
    @startoverflowsPosted almost 2 years ago

    @Ao-chi Thank you for your advice I hope I can structure the css/html better as your points in the next challenge. Your feedback has excited me.

    0
    Josh•320
    @Ao-chiPosted almost 2 years ago

    @startoverflows You're welcome!

    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