Skip to content
Submitted over 3 years ago

Desktop / Mobile responsive design. Using HTML, SCSS, and Flexbox.

Alan•75
@aljayy
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Stats preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Hey there, this is my first completed project. And I have a question that I'm hoping to get some feedback on.

  1. When creating a colored overlay over my image, I used the ::after pseudo selector to do so. But it added about 5-6 pixels worth of height to the div box my image was in every time the selector was added so the colored overlay actually came out of div box and the only way I could fix this was by making the height of the pseudo selector 99%. Although it got the job done I'm looking for some feedback because I'm sure there's a better way to make sure the overlay didn't bust out of the box?

If there's anymore feedback anyone can think of when looking at this, that would be very much appreciated! Have a good day.

Community feedback

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

    More feedback:

    • Don't use id for styling, since on big projects, it causes a lot of issues.
    • Use rem for everything or sometimes em instead of px.
    • You should put your common styling first, then card styling. It will make you in the future and people who want to review your CSS can understand easily your CSS.

    That's it! Hopefully this is helpful!

    Marked as helpful
    1
    Alan•75
    @aljayyPosted over 3 years ago

    @vanzasetia Wow, thanks for the honest and helpful feedback Vanza. I really appreciate it 😁. These were really great tips.

    0
  • Shahin NJ•1,190
    @SJ-NosratPosted over 3 years ago

    Hi Alan, Great job on the project! It's nicely responsive!

    With regards to your question, one approach using CSS is the following:

     #card-image {
   background-color: #6E14B8;
}

#card-image > img {
   mix-blend-mode: multiply;
   max-width: 100%;
}

    From MDN: The mix-blend-mode CSS property sets how an element's content should blend with the content of the element's parent and the element's background.

    Hope the above helps!!!

    Best of luck with your coding journey!!!

    Marked as helpful
    1
    Alan•75
    @aljayyPosted over 3 years ago

    @shahin1987 Hey Shahin, thank you for your help and for including that MDN link! That was really informative and I'm definitely going to be using that next time. Have a good day!

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

    @aljayy I would be much better if you do it now. That way, you will learn on how to fixing bugs or refactoring your code which is one of an important skill as a web developer.

    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