Submitted about 1 year ago

Responsive FAQ accordion using jQuery

accessibility, jquery

ren•50

@ktmagno

A solution to the FAQ accordion challenge

Preview Code

Solution retrospective

What are you most proud of, and what would you do differently next time?

I'm proud that I successfully did all the required actions/tasks in this challenge and I'm satisfied with the result. I will try to improve my media query coding next time.

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

How to make this look good and neat in all possible screen sizes. I somehow overcame it by putting a lot of CSS breakpoints.🥲

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

The bg-pattern doesn't cover the whole screen width when it's more than 1440px. I would appreciate some help. Thank you so much!

Code

Couldn’t fetch repository

Please log in to post a comment

Community feedback

Saul Gabriel Aranguren•330
@saularanguren
Posted about 1 year ago
Greetings Ren, your solution is really interesting and wonderful, however, it can be improved in the organization of files and folders, within your index.html file you should not do this:
```
<link
      rel="icon"
      type="image/png"
      sizes="32x32"
      href="./assets/images/favicon-32x32.png"
/>
```
better do this:
```
<link rel="icon" type="image/png" sizes="32x32" href="./assets/images/favicon-32x32.png"/>
```
Don't cut the lines, doing that is bad practice and messes up your code.

correct this bad practice in all the lines where it is repeated, upload your changes again to your gthub repo

In addition to that, I recommend learning Sass, it will help you create CSS styles ordered and by modules, this way you will not have a style sheet with more than 500 lines

Links:
happy code development
Marked as helpful
Koda👹•3,830
@kodan96
Posted about 1 year ago
hi there! 👋👋

Instead of giving the image position: fixed set it as the background-image to the body element like this:
```
body {
background-image: url()
background-size: contain;
background-repeat: no-repeat;
}
```
just copy the img path into url() this should resolve the issue.

Hope this was helpful! 🙏

Good luck and happy coding! 💪
Marked as helpful

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