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

@mihainrs

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 are you most proud of, and what would you do differently next time?

Managed to get the Javascript part faster than before, slowly getting better at it!

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

I struggled with the responsiveness of the project - anything that's not 1920 or 375 aka desktop or mobile, looks real bad, and have yet to figure out why.

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

Any feedback works!

Community feedback

P
Koda👹 3,810

@kodan96

Posted

hi there! 👋

Since you applied a huge margin on your #main_container it gets squished on small and mid-size screens. If you want to center your content you can do it with making the body tag a flex-container:

body {
  display: flex;
  justify-content: center;
  min-height: 100vh;
}

you can declare max-width on your container to prevent it from stretching the full screen-width.

Instead of putting the image in an actual div you can set it as a background-color to the body tag.

Hope this helped 🙏

Good luck and happy coding! 💪

Marked as helpful

1

@mihainrs

Posted

Hey @kodan96!

I tried applying display:flex to the body but the image was part of the reason I had to resort to using such big margins. I tried lots of things and not much worked sadly.

I didn't know about the image being set as a background-color though. I'll look into it and see how that can be done, so really great advice, thank you!

1
P
Koda👹 3,810

@kodan96

Posted

@mihainrs

sorry, it's background-image, not color. I went autopilot 😂

0

@mihainrs

Posted

@kodan96

Oh lmao all good haha, thank yu thank yu!

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