Skip to content
OverviewSolutions
9
Comments
5
P

Chenxi

@Chenxi96Toronto, Canada210 points

I'm currently working in the trades and is coding on the side. I would love to have more time to code!

Latest solutions

View more solutions

Latest comments

  • P
    Franci Melink•400
    @francimelink
    What are you most proud of, and what would you do differently next time?

    I think the project worked out pretty well for me. Next time I would try to solve something like this with a grid layout

    What challenges did you encounter, and how did you overcome them?

    What took me some time was that I tried every way to add the background image to the body itself. I had problems because I somehow wanted the image to always be about 30% of the viewport. I later bypassed this with a header element and set a fixed height that I got using figma.

    What specific areas of your project would you like help with?

    As I mentioned above, I am interested in how to make the background image height 30% regardless of the screen. It somehow didn't work for me at all, if I take landscape orientation on mobile

    Faq Accordion using flexbox relative sizes

    1
    P
    Chenxi•210
    @Chenxi96

    Hi @francimelink,

    This looks awesome! For your question about background image you can use this css property: background-size - This adjust the width and height of your background image.

  • P
    Chenxi•210
    @Chenxi96

    Hi there,

    This looks good, the reason that your border color isn’t showing is because you only had hover on the border width. This example should work with your hover issue.

        <section class="bg-[#FFF0F0] flex justify-between p-3 rounded-xl hover:border-2 hover:border-[#FF5757]">
          <span class="flex"><img class="" src="./assets/images/icon-reaction.svg" alt="icon-reaction">
          Reaction</span>
          <span><strong class="">80 </strong>/ 100</span>
        </section>

    I just added a hover instance on your border-[#FF5757]. Let me know if this helps!

  • P
    Chenxi•210
    @Chenxi96

    Hi Ray,

    This looks great! After looking through your code I notice that you used display none for your div#thank-you-container, unfortunately you can’t use transition with display none. There’s a work around for this but the best way is to use @keyframes. Here’s a link for reference: https://www.geeksforgeeks.org/why-transition-properties-does-not-work-with-display-properties/amp/

    Marked as helpful
  • P
    Chenxi•210
    @Chenxi96

    Hi there,

    This looks great! I have some suggestions that you can use if you want.

    • For a more semantic html structure I would recommend having your div.conteiner to be main tag. This helps with SEO performance and accessibility. Use this as reference: https://www.w3schools.com/html/html5_semantic_elements.asp

    • Your p tag that has “HTML & CSS foundation” can have a hover selector that when your mouse hovers on top it can change the elements style. Us this as reference: https://www.w3schools.com/cssref/sel_hover.php

    Marked as helpful
  • P
    Chenxi•210
    @Chenxi96

    Hi Filip,

    This looks good, I suggest that you use position: absolute for div#bubble-div and div#bubble-triangle. This way you remove these div’s out of the regular flow of the web page. This will remove the small jump. Let me know if this helps!