Skip to content
Submitted almost 3 years ago

EFT Card Component Mobile First Approach Using SASS

Jose Chaparro•455
@jchapar
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...NFT preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Hello, Any feedback would be greatly appreciated! I tried this challenge using SASS and took a different approach in regards to my styling. I used utilities classes that I created for the basic styling and used media queries to finish the styles for each screen size.

Community feedback

  • Web Wizard•5,690
    @rsrclabPosted almost 3 years ago

    Hi, @jchapar ~ Congratulate on your solution to the challenge on FM platform.

    I have studied your work and learned a lot from it. Here are some of the tips I like to provide.

    1. Card style goes wrong on >1850px screen side. I think that's because you used max-width for main element. That could be serious issue, because many users use wider than that width nowadays.
    2. On smaller width, too much padding on both sides. That makes card shrunk, and it doesn't look good.
    3. I hope you to try BEM structuring. It will help you a lot on bigger projects.

    https://www.frontendmentor.io/solutions/my-first-solution-on-chanllenge-V-4IzAivH

    Here is my solution to this challenge, and I also tried sass. If it help you even a bit, that would be really great happy to me.

    Happy coding ~

    Marked as helpful
    0
  • Anosha Ahmed•9,300
    @anoshaahmedPosted almost 3 years ago

    To get rid of the accessibility issues shown in your Report above:

    • wrap everything in your body in <main> ... OR use semantic tags ... OR give role="" to the direct children of your <body> ... Click here to read more
    • have at least one <h1> in your code

    Great job! :)

    Marked as helpful
    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