Skip to content
Submitted 8 months ago

Product Page Using HTML and CSS

Shahzaib Ur Rehman•370
@Shahzaib-ur-Rehman
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

What are you most proud of, and what would you do differently next time?

This challenge enhances my CSS writing skills.

What challenges did you encounter, and how did you overcome them?

The primary challenge in this project is to employ optimal techniques for styling and aim to minimize the CSS.

What specific areas of your project would you like help with?

Please provide font sizes

Community feedback

  • Grace•31,090
    @grace-snowPosted 8 months ago

    This looks great overall, but there is one problem for me viewing on my phone.

    The top of the content is cut off for me because you've set the html and body to be height 100%. I'll add Screenshots to discord so you can see this - it gets really bad for those who enlarge text size too. Remove html from that line of the reset and the bug will be fixed. It does not need to be height 100%.

    I also recommend you use the flex column approach for centering components like this in the viewport. The grid place-content center approach can cause content to overflow on the left for users who need a large text size.

    You should be setting the componentax width in rem. And the media query must be defined in rem or em. These changes would allow the layout to scale properly for those of us with larger text sizes.

    Last thing I noticed was that letter spacing was in px. It's usually better to use em for this so it scales with the text size on the same element.

    Marked as helpful
    1
    Shahzaib Ur Rehman•370
    @Shahzaib-ur-RehmanPosted 8 months ago

    Thank you so much for your time and valuable suggestions! I'm committed to incorporating all your insightful advice into my future projects. Much appreciated, Grace!

    0
  • Urszula•180
    @ursgolPosted 8 months ago

    Good job! It looks great.

    1
    Shahzaib Ur Rehman•370
    @Shahzaib-ur-RehmanPosted 8 months ago

    thanks @ursgol

    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