Skip to content
Submitted 6 months ago

FAQ_accordion

Peter Wahu•190
@Pe-te-r
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...FAQ accordion
  • HTML
  • CSS
  • JS
1newbie

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
    @Grego14Posted 6 months ago

    👋 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

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