Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
11
Comments
1
Humphrey Yeboah
@hakylepremier

All comments

  • warrenbarney•70
    @warrenbarney
    Submitted almost 2 years ago

    product responsive

    1
    Humphrey Yeboah•150
    @hakylepremier
    Posted almost 2 years ago

    Okay so I think you found it difficult to do the responsive design because you used the same image for both desktop and mobile. There where two separate images so to achieve a responsive design you had to use a picture tag instead of the image tag you used.

    For example this:

    <img src="images/image-product-desktop.jpg" alt="">
    

    would replaced by this:

    <picture>
      <source media="(max-width:600px)" srcset="images/image-product-mobile.jpg"/>
      <img src="images/image-product-desktop.jpg" alt="" />
    </picture>
    

    You can find more information at this link.

    Hope this helps.

Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub