Skip to content
Submitted over 2 years ago

Product preview card component not responsive

Oliver Panthera•20
@OPanthera
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

Community feedback

  • MURRAY122•280
    @MURRAY122Posted over 2 years ago

    Hi, Taking a quick look at the code, seems your svg icon-cart is not displaying on the live site. The src your calling would work in your development environment but fails to find it in production. Changing it similarly to how you have displayed your product image would correct it. ./images/icon-cart.svg. The svg tag could also be within the DOM itself if that also suits

    In terms of helping users view it on different screen sizes I noticed you had @media screen and (max-width: 370px) { } With max-width set to 370px, anything within this media block will display when the users screen/view is no more than 370px. Try increase the pixels to say 780px for example and you will see what I mean.

    • W3schools SVG
    • W3schools helped me out with responsive design so it might interest you.
    • There is also a resource tab on frontend mentor with lots of different Info
    0
  • javascriptooo•310
    @javascriptoooPosted over 2 years ago

    Given the accessibility issues -- you need to include at least the <main> landmark.

    The <main> landmark tag can be inserted around your content inside the <body>. Here is some documentation

    Adding the <main> landmark will remove 3 accessibility issues! :)

    Also, with accessibility, you cannot skip headings. Headings are used by screen readers for people to navigate the page. So users can jump to it. If you have multiple headings, the user can skip them in screen readers.

    Check out this Headings Documentation

    Also, any time you add an <img> tag, you must include an `alt="your description here" attribute. It also helps with accessibility.

    Inside the <head> tag, you will need to insert a <title>. :)

    Hope that helps! Keep hustling!

    Steven

    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