Skip to content
OverviewSolutions
9
Comments
5
Chenxi
@Chenxi96

All comments

  • Franci Melink•400
    @francimelinkSubmitted 9 months ago
    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
    Chenxi•210
    @Chenxi96Posted 9 months ago

    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.

    0
  • Chenxi•210
    @Chenxi96Posted 10 months ago

    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!

    1
  • Chenxi•210
    @Chenxi96Posted 10 months ago

    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
    1
  • raficksz•10
    @rafickszSubmitted 10 months ago

    This is my frist challeng, feedbacks about code are welcome. Thanks for view.

    Blog Preview Card

    2
    Chenxi•210
    @Chenxi96Posted 10 months ago

    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
    1
  • Filip Szkarłat•180
    @FilipSzkarlatSubmitted 10 months ago

    If you have any advice on what I can do better, I would be grateful for your comment. The most difficult thing for me was the pop-up bubble chat in the desktop view. Unfortunately, there is a small jump when this window pops up, I know what is causing it, but I don't know how to fix it.

    Responsive landing page with CSS flexbox and JS

    1
    Chenxi•210
    @Chenxi96Posted 10 months ago

    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!

    0