@tabascum
Latest solutions
Latest comments
- P@madosy
You have to use unique id for your objects. All your items have #faq-question as id. I would suggest to move that to class.
Way I would change the other questions as inactive: add an eventlistener to all your questions. Upon click, remove the "active" class from all your faq-question divs and then add the active class to the one that triggered the event.
You need to have the arrow point the other way when you open a question. You could probably do this by selecting .active > img and transform y.
Marked as helpful - @vivekrajput-93P@madosy
For the buttons, either change the box sizing to border box or have the border all the time and change the fill on hover. Right now, when I hover on the button, I see the height of the card changing and I think it's due to the border on hover.
- @AdamR22P@madosy
Rather than setting discrete margin values on .qr-card-and-content, I would align it to center by making the body into a flex container. The reason you don't want to use discrete margin values to align is because depending on the browser window size, your QR code component can look very different: https://imgur.com/hNuIYNs
As for the question about margins looking different on firefox vs. chrome, I wasn't able to discern any differences on my computer--the margins were the same when the window sizes were the same when I inspected each element in developer tools. I suspect that the issue may be related to setting discrete margin values but I would advise using the inspect tool yourself to check the margin values and see where the differences are. https://imgur.com/h9c0ibC
Marked as helpful - @aisafaithP@madosy
If a css rule that you added isn't working like what you expected, it can be helpful to inspect the element using developer tools.
For example, I added margin-right: 20px to your p element and inspected it using the chrome dev tool and the margin is showing in orange: https://imgur.com/a/Is5u4fn
Marked as helpful - @DavidOG03P@madosy
Great job! I would get rid of .container_summary_continue {max-width: 375px} since the button doesn't look centered on screens of width between 769px and 375px.
If you do want to keep it at 375px all the time AND centered, I would make the div.container-summary as a flex container and add align-self: center; to the button.
- @Gerald-LeCourP@madosy
Hey looks great! I noticed that it doesn't fit right on mobile. When you added padding-left: 30px to div.summary-content, it added to the total width, causing it to be 405px and generates a scrollbar and empty space to the right.
I would change the div.summary-content {box-sizing: border-box;} so that your width won't change even if you add padding, and get rid of padding-right on your .summary-content ul.
I would also get rid of margin-right on your .list-scores and just add padding-right on your div.summary-content so you don't have to look at different areas for controlling the padding.
Marked as helpful
