Skip to content
Submitted about 3 years ago

Pure HTML & CSS solution.

Ginaldo Capistrano•70
@gcapistrano
A solution to the 3-column preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Hello, everybody! There is a problem with my solution, besides any others that you'll find, that is, when shrinking the window to make the transition to the mobile view, the left side of the container disappears swallowed by the window side. I've tried to use the overflow property but it didn't work. Any help will be welcome!

Code

Please log in to post a comment

Log in

Community feedback

  • Vanza Setia•27,715
    @vanzasetia

    Hi there! 👋

    I'm afraid that you need to completely rewrite the CSS because right now everything is almost out of the normal flow because those elements are set to position: absolute. So, I recommend letting the element position as it is. In general, the absolute position should be the last solution and in this case, you can complete this challenge without absolute positioning.

    So, here are some tips from me.

    • To make the card perfectly in the middle of the page, you can make the body element as a flexbox container.
    • The container only needs a max-width to prevent all the cards from becoming too large on desktop layout and mobile layout.
    • All the icons and text can be positioned correctly by using margin for vertical space.

    By removing all the absolute positioning, the problem that you currently might also be solved.

    Happy coding and good luck!

    Marked as helpful
  • Rafael Takano•180
    @rafaeltakano

    Hello there ✌

    To fix the part of the container gonne missing at moblie view, you'll need to refactor your code to work without the position absolute on the class .container

    And the accessibility issue at the report card, its only about the .attribution class that it is not wrapped with a landmark tag, wrap it on a <footer> and it will be fixed!

    Hope It helps!

    Marked as helpful

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord