Skip to content
Submitted over 1 year ago

Product Preview - my first CSS

Judy Gibson•10
@JudythG
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

I tested on Chrome and did my best there. After I was finished, I looked at it on Firefox and Microsoft Edge, and it's terrible on those two. Why so different? How do I keep that from happening? In Chrome, the vertical layout of the right-hand side doesn't stretch out over the entire section. I have no idea how to fix that. I welcome all constructive criticism. What are good resources to learn how to layout items using CSS?

Community feedback

  • mohamed nasr•160
    @stitch-606Posted over 1 year ago

    use @media(max-width:768px) and make your mobile design look better

    1
  • Mahmoud•150
    @MamoutyPosted over 1 year ago

    For this challenge it's better to use the CSS grid to make the component responsive. Follow this link CSS Grid. Also make sure to change the image at break points, for that you should use the <picture> html element. You can find more about it here picture-element

    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