Skip to content
Submitted over 2 years ago

Product preview card component

Selvi•30
@miofri
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

RE the attribution: I don't know how to make it stay in the center with position: fixed and also give it a margin so that it doesn't overlap with the white text box (on mobile view i.e. Surface Duo's, iPad mini, etc.).

I'm also unsure what is the best practice for font-size scaling. Which unit to use? What are the best sizes?

The rest was not too difficult although it took me some time to figure out.

Community feedback

  • Shams Wali Sowmo•130
    @Sowmo0509Posted over 2 years ago

    Hey Selvi, nice work! But–

    1. The footer overflows, try to give it a padding/margin (to the footer or to the bottom of the card),
    2. You missed the cursor: pointer; for button,
    3. And your button is out of the white box on desktop.
    Marked as helpful
    0
    Selvi•30
    @miofriPosted over 2 years ago

    @Sowmo0509 Hi Shams,

    thanks a lot for the feedback! Unfortunately I have not figured out yet how to check if my button looks just as good on a bigger screen as it is on my laptop.

    As for the footer, I tried unsetting it so that it's no longer fixed, but as I wanted it to be outside of main, I have to scroll down to see it. But I think it looks better now! :)

    I did not notice the cursor at all, thank you for pointing that out!

    0
    Shams Wali Sowmo•130
    @Sowmo0509Posted over 2 years ago

    @miofri Hello again, you can right click on any website, click on Inspect or Inspect Element then you will find a RESPONSIVE icon, it will help you to inspect how it will look on Mobile, Desktop or even TVs. You can find some YouTube videos as well.

    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