Skip to content
OverviewSolutions
25
Comments
6
Richard
@Richard-08

All comments

  • Richard•960
    @Richard-08Posted over 4 years ago

    Hi Gloria! Great work! To vertically center the component, you can add styles to the parent element (in your case it’s "body"): {display: flex; align-items: center; justify-content: center}. Good luck, Gloria:)

    0
  • Juan Daniel Martínez•470
    @juandadevSubmitted almost 2 years ago

    Feel free to leave your feedback 😌

    It was a headache implementing the filter function, I wanted to do it with the JSON file but finally opted for data values. Guess can do the same but it's finally done, maybe I'll add more animations later.

    Job Listings with Vanilla Javascript and CSS

    2
    Richard•960
    @Richard-08Posted over 4 years ago

    Hi, Juan! Great work! Cool animations and effects. I think the "job-container" should have a left border that has a featured flag.

    1
  • Richard•960
    @Richard-08Posted over 4 years ago

    Hi, paminus king'ori's! Good work!

    For .box-window, you can use the "display: flex" and "flex-wrap: wrap;". Then the blocks will be transferred and you can not use grid in the media queries.

    Good luck!

    0
  • Gabriela C•195
    @gcardenasdevSubmitted over 4 years ago

    1. Was my usage of Flexbox for the mobile version and Grid for the desktop correct? Should only one be used for both?

    2. Are there any ways I could have made my code more reusable or readable?

    3. Any kind of feedback is welcome!

    Four card feature section using CSS flexbox and grid

    2
    Richard•960
    @Richard-08Posted over 4 years ago

    Hi, Gabriela! Good work!

    The answer to your first question: For # four-card section, you can use the "flex-wrap: wrap;". Then the blocks will be transferred and you can not use grid in the media queries.

    Good luck, Gabriela!

    2
  • Richard•960
    @Richard-08Posted over 4 years ago

    Hi! Good work:) After clicking the button, the page refreshes. I suggest adding in the script event.preventDefault(). The Event interface's preventDefault() method tells the user agent that if the event does not get explicitly handled, its default action should not be taken as it normally would be.

    Good luck!

    1
  • Saka Sheriff A.•30
    @sheriffsakaSubmitted over 4 years ago

    Please, I will appreciate any idea on how to improve on this solution and what to add or removed from it. I look forward to your suggestions. Thank you

    Easybankfiles

    2
    Richard•960
    @Richard-08Posted over 4 years ago

    Hello! Good work! You can improve navigation. Add logo, links and button to different containers <div></div>. And then parent container "topnav" make flex. Example:

    <nav class='topnav'> <div class='logo'></div> <div class='topnav__links'></div> <div class='topnav__btn'></div> </nav>

    Styles: .topnav { display:flex; justify-content: space-between; align-items: center; }

    Then you can add padding, margin and it will be like in design:) Good luck!

    0