Skip to content
Submitted over 3 years ago

Responsive 3 Column Preview Card using Flexbox/SCSS and Mobile-First

sass/scss
Caio de Alcantara Santos•250
@caio-alcantara
A solution to the 3-column preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

This was the first project I did using the "mobile-first" approach, and I actually think it helped a lot for responsivity. However I had a problem when trying to do the active state (hover) on the links. Basically, I set the link's colors to the same color as the background. I thought the right way of doing it would to set the text color to 'transparent' but that didn't work out. Anyway, the solution I found worked out great until I had to do the hover state. I couldn't manage to get the link's background-color to be transparent, and the text color to be white (not managing to change the text color to white is the big issue here, I think). Can anyone help me with that?

Code

Please log in to post a comment

Log in

Community feedback

  • Travolgi 🍕•31,300
    @denielden

    Hi Caio, I took some time to look at your solution and you did a great job!

    Tip of graphic design: With font-family:" Big Shoulders Display ", cursive the browser will use the Comics Sans font when it doesn't find the first font indicated (you can seen during loading) ... for the designer it's a really awful font!

    • I would rather replace it with a font-family:" Big Shoulders Display ", sans-serif much more similar to the primary font.

    Also the button have another font and in the hover state the text isen't visible

    Overall you did well :)

    Hope this help and happy coding!

    Marked as helpful
  • Herson•220
    @Hersonmei

    Hi Caio!

    Test it out and see if it works.

    Add this color to your hover:

    .card a:hover {
  background-color: transparent;
  -webkit-transition-duration: .1s;
  transition-duration: .1s;
  color: hsla(0, 0%, 100%, 0.75);
}

    I think it's a question of specificity, it would be good to see that because I won't be able to explain it very well. But I managed to solve it by deleting all its id and transforming it into classes.

    In your HTML code it will look like this:

    <div class="card sedans" >
...
</div>

<div class="card suvs">
...
</div>

    And in your CSS code it will look like this:

    .sedans {
   ...
}
.sedans a {
  ...
}
.suvs {
   ...
}
.suvs a {
   ...
}
.luxury {
...
}
.luxury a {
   ...
}

    Only with these changes has it started to work here. I recommend trying to find out the more detailed explanation of this, but I believe it could be greater ID specificity.

    Good studies and keep sending new projects!

  • optimusprime202•1,160
    @optimusprime202

    Hey @caio-alcantara, Tremendous work!

  • Mayur Mali•810
    @Mayurtm29

    Hi Caio , First learn more button is not aligned properly

  • Caio de Alcantara Santos•250
    @caio-alcantara

    Also, I just saw now that my card's width is waaay bigger than it should. I'm going to fix it, but I have no screenshots left for the month, so it'll stay like that here.

    Edit: Although the screenshot solution doesn't seem that good, check the live site, I swear it's better hahahaha

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