Design comparison
Solution retrospective
Need feedback on these: -I couldn't keep the box image fixed to its position while transitioning through different viewports -is it only on my browser, or does absolute left and right didn't work for the images when I used flex (for parent container)?
Any other feedback would be welcome! :)
Community feedback
- @ApplePieGiraffePosted almost 4 years ago
Hey, Greeshma! 👋
Good job on this challenge! Your solution looks good and the accordion works rather well! 👍
In addition to tediko's great feedback, I suggest,
- Centering the accordion on the page using flexbox (or auto margins, if you'd like) so that it always remains centered even when the page is resized. 😉
Keep coding (and happy coding, too)! 😁
1 - @tedikoPosted almost 4 years ago
Hello, Greeshma! 👋
You did good job on this challenge! Let's look at your problem.
- The
content
property should be used with the::before
and::after
pseudo-elements, to insert generated content, you try to use that property on normal element. What i can suggest is to move your.box-img
html to.container
and set image src. Then position it withposition: absolute
andtop/left
properties. If you want to keep your first thought and do it with css you need to create::before
pseudo-element on.container
or other element and then you can usecontent
property with image url on this pseudo-element. - This also aplies to your arrow images in faq. Try not to repeat your HTML code with image for each arrow. Easier way around is to use pseudo element
::before
on your.question
element. Set it toposition: relative
and your pseudo element asposition: absolute
. Put your image using content: url(image.jpg).
Good luck with that, have fun coding! 💪
1@Greeshma2903Posted almost 4 years ago@tediko thank you!! Will make the changes soon :)
0 - The
Please log in to post a comment
Log in with GitHubJoin 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