FAQ accordion

Community feedback

• 

  Mahmood•1,470

  @MahmoodHashemPosted 4 months ago

  Hey,

  Well done on finishing the challenge!

  Your project is really impressive.

  You can make the background image fit the whole page or its container by using the background-size property set to contain. And It seems like the hr color is working as intended.

  Keep up the great work!

  Marked as helpful

  0

  ---

  

  Ehsan•210

  @Ehsan-eslamiPosted 4 months ago

  @MahmoodHashem I think the best solution is put the background image into an img tag and give it position absolute. i've done this project in this way and it works properly

  0

  

  Mahmood•1,470

  @MahmoodHashemPosted 4 months ago

  @Ehsan-eslamiYes, you are correct that it works, but it is not semantically recommended.

  0
• 

  Krushna Sinnarkar•1,100

  @krushnasinnarkarPosted 4 months ago

  Hi @Dubbelteis,

  Congratulations on successfully completing the challenge!

  Your solution looks nice, though there are a couple of things you can improve which I hope will be helpful!

  1. Background Image: To address the background image issue, you can use:

     background-size: contain; 
     

     or

     background-size: 100%;
     

     This will help ensure that the image displays correctly across different screen sizes.

  2. Horizontal Rule (<hr>): The <hr> element is working fine on Edge and Chrome, so it might be a browser compatibility issue. Could you let me know which browser you are using? It may help in identifying the problem.

  3. Semantic Tags: It’s important to use semantic tags for better accessibility and SEO. If you're not familiar with them, I suggest learning about semantic HTML elements. Here are some advantages of using semantic tags:

     • Improved Accessibility: Screen readers and other assistive technologies can better understand the structure of your page, making it more accessible to users with disabilities.
     • Better SEO: Search engines use semantic tags to better understand the content of your page, which can improve your page’s ranking.
     • Easier Maintenance: Semantic HTML provides a clearer structure, making it easier for developers to read and maintain the code.
     • Enhanced Readability: It helps to clearly define different parts of your page, such as headers, footers, and main content, improving overall readability.

  I hope you find this helpful, and I would greatly appreciate it if you could mark my comment as helpful if it was.

  Feel free to reach out if you have more questions or need further assistance.

  Happy coding!

  0

  ---

  

  Anja Teisman•130

  @DubbelteisPosted 4 months ago

  Hi Krushna Sinnarkar,

  Thank you for your reaction. Background-size: contain is working! I use the firefox browser and keep getting a dark color. When I opend it in Edge I got the right color so it is indeed a browser thing. Concerning your third comment about the semantic tags, I have no clue what you're talking about so I have some reading up to do :-)

  0