Skip to content
Submitted over 2 years ago

Pure HTML & CSS solution.

Ginaldo Capistrano•70
@gcapistrano
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...3-column preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

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!

Community feedback

  • Vanza Setia•27,775
    @vanzasetiaPosted over 2 years ago

    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
    1
    Ginaldo Capistrano•70
    @gcapistranoPosted over 2 years ago

    @vanzasetia Hello! I'm happy about your comment! It will be very helpful when I come back to this challenge. Sure I'll follow your suggestions and incorporate them into my workflow, including the challenge that I'm working on now. Thank you very much!

    0
    Vanza Setia•27,775
    @vanzasetiaPosted over 2 years ago

    @gcapistrano You're welcome! 👍

    0
  • Rafael Takano•180
    @rafaeltakanoPosted over 2 years ago

    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
    1
    Ginaldo Capistrano•70
    @gcapistranoPosted over 2 years ago

    @rafaeltakano Thanks for your comment! I'll keep it in mind when coming back to this challenge.

    0

Please log in to post a comment

Log in with GitHub

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