Skip to content
OverviewSolutions
6
Comments
6
madosy
@madosy

All comments

  • Vasco Marques•290
    @tabascumSubmitted over 1 year ago

    At this point I'm struggling with the mobile layout and the close action on other answers when one of them is clicked.

    FAQ Accordion Card

    2
    madosy•180
    @madosyPosted over 1 year ago

    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
  • madosy•180
    @madosyPosted over 1 year ago

    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
    @AdamR22Submitted over 1 year ago

    Margin Issues

    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?

    QR code page using flexbox

    3
    madosy•180
    @madosyPosted over 1 year ago

    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
    @aisafaithSubmitted over 1 year ago

    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!

    QR Code - HTML and CSS only

    2
    madosy•180
    @madosyPosted over 1 year ago

    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
    @DavidOG03Submitted over 1 year ago

    • Very nice coding experience.

    • Also I love the choice of colors.

    • I found placing the small text 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.

    Result Summary Component Using Flexbox

    1
    madosy•180
    @madosyPosted over 1 year ago

    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
  • madosy•180
    @madosyPosted over 1 year ago

    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