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 using HTML and CSS

@Capt-Coder

Desktop design screenshot for the FAQ accordion card coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hi, I tried my best to recreate the design but faced some issues in placing the box image and the background image in the desktop view. Both of them kept changing its position whenever I resized the screen.

Have a look at the code and the site. If any of you have any suggestions or tips for these issues, please do comment it below. Thanks in advance!! 😊

Community feedback

NBD 240

@bdal90

Posted

Hello Dear Capt-Coder,

I am an absolute beginner myself, but I've been in your shoes suffering with these very images, so let me please share with you what I came up with and seemed to work eventually. You may try setting the woman at the computer image as background too and using absolute positioning for the box image, (which you were trying to). This way, you will have 2 background images which you can position separately using a comma. The one in the first line will appeare on top. Here is a snippet of my code, but bare in mind that this might not be the only and the best solution :)

.image-side { background-image: url(images/illustration-woman-online-desktop.svg), url(images/bg-pattern-desktop.svg); background-repeat: no-repeat; background-position: -5rem, -35rem -25em; position: relative; width: 50%; }

.img-box { position: absolute; left: -5.8rem; top: 40%; }

Marked as helpful

1

@Capt-Coder

Posted

@bdal90 Thank you so much!! I never knew we could have two background images. I'll keep this in mind for future use! Thanks a ton

:O)

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