Vasco Marques• 290
@tabascum
Submitted
At this point I'm struggling with the mobile layout and the close action on other answers when one of them is clicked.
madosy
@madosy
All comments
- madosy• 180
@madosy
Posted
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
0 - vivekrajput@93• 450
@vivekrajput-93
Submitted
Hi there 👋, I’m Vivek Rajput and this is my solution for this challenge.
🛠️ Built With:
HTML5, CSS3.
Any suggestions on how I can improve and reduce unnecessary code are welcome!
Thank you.
madosy• 180@madosy
Posted
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.
0 - Adam• 60
@AdamR22
Submitted
I have issues with margin when it comes to firefox. The site may look different on firefox as compared to chrome. Any idea on how to solve this?
madosy• 180@madosy
Posted
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
1 - Aisa Faith• 10
@aisafaith
Submitted
I did not know what to do at first. I thought I had to make the QR code from scratch (noob haha). Anyway, I figured it out soon, and I had fun doing it. I'm happy to learn how to center image vertically using flex.
I'm not sure if what I did in the text part <h2> and <p> are correct. I wanted bigger margins on left and right of the text so their extent would be narrower than the QR code. Margin-left worked, but margin-right had no effect. So I decided to put them in a text-box with a set width instead. Is there a better way to do this?
Also, because I didn't really browse this website, I did not see the note there to try to use tools like SASS. It's the first time I learned of this term, so I have to check it out. But really, why do you have to use those tools? Isn't CSS enough? Why add another step?
Feedback most welcome.
Thank you!
madosy• 180@madosy
Posted
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
0 - David OG• 340
@DavidOG03
Submitted
-
Very nice coding experience.
-
Also I love the choice of colors.
-
I found placing the
smalltext at the center and at the bottom difficult though. But I managed to align it -
Please if there is a better way to do it , do not hesitate to tell me about it.
Thank you.
madosy• 180@madosy
Posted
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.
1 -
- Gerald LeCour• 170
@Gerald-LeCour
Submitted
madosy• 180@madosy
Posted
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
0
