Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Desktop design screenshot for the FAQ accordion coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


srcset messed up.

Community feedback

@Anass-Lamiri

Posted

Hi, you did a great job in your challenge almost all the required design elements are present, except the background image, this later needs to be on the edges of the screen in all screen viewports if you want to see I mean go for larger screens and you will see margin around the bg-image, the solution to this problem is by using position absolute in the figure element and some changes to the element, here's a simple solution to this problem:

  • The picture element should have this code:
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
  • img tag inside the picture element should have this code: width: 100%;

  • if you have a problem in the srcset, I recommend you to read this article about it srcset

I hope you find this feedback helpful.

0

Please log in to post a comment

Log in with GitHub
Discord logo

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