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

Submitted

FAQ_accordion

Peter Wahu 190

@Pe-te-r

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


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

Making the background image to occupy the whole of x axis on screen past 1500px. I had to remove the background image on big screen and leave it for small screens to show it.

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

How do i make a background image to strecth on the x axis. The image provided on this project could not span on the x axis to occupy whole width when screen is past 1500px.

Community feedback

Grego 1,310

@Grego14

Posted

👋 Hello! 🎉 Congratulations on completing the challenge! 🎉

To make the image take up the entire width of the screen regardless of the width of the device you can use: background-size: 100% or background-size: 100vwinstead of background-size: auto

But I have to say that the 100% will only work if the element occupies the entire width of the screen, in this case the body occupies the entire width so no problem!

It may be that on small screens the height of the image is very small, but to solve that I recommend you to do that background using a positioned element and not background-image property.

I hope this helps! 😁

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