Skip to content
Submitted over 2 years ago

My attempt to the Product preview card component challenge. HTML/CSS

Ruthwik•190
@web-devie
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

First of all, thanks for passing by :)

  1. I have built this project using flex and I am sure it can be built using "grid" but I don't know how to layout using grid. Question: I have a question what affect does laying in grid regarding this project. Is the affect minimal or huge?

  2. I have struggled my bit using media queries as well when it comes div with class name "attribution" I can't position it according to screen size. Can anyone help me with that?

3.Any kind of feedback is highly appreciable. Have a glance at my code and suggest what I could have done better to achieve a better version than this. Thanks!

Community feedback

  • Piyush jain•220
    @PiyushJain01Posted over 2 years ago

    Hi 👋 In this media query@media screen and (min-width: 365px) and (max-width: 750px) the mobile design is showing only between 365px and 750px but if the screen size is less than 365px then again the desktop design is showing. So instead of this you can write @media screen and (max-width: 750px).

    For Attribution you can use text-alignproperty instead of position :absolute; to align the text in center.

    .attribution{
     font-size: 14px;
    font-family: Montserrat;
    text-align: center;
}

    I hope this will help you. Happy Coding :)

    Marked as helpful
    1
    Ruthwik•190
    @web-deviePosted over 2 years ago

    @PiyushJain01 Thank you so much, that really helped :)

    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