Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
6
Comments
3
Karl Matthews
@karmatt

All comments

  • Erdoğan Togay•20
    @erdogantogay
    Submitted almost 4 years ago

    Stats preview card component

    2
    Karl Matthews•115
    @karmatt
    Posted almost 4 years ago

    There's multiple ways to change the image color, but the one I like is using the ::after pseudo element (less markup).

    What ::after does is place something immediately following the content of the element. So what you would do is for div that is wrapped around the image set it's position to relative.

    Then create another selector:

    div::after {

    content: "" content is required when adding the ::before and after:: pseudo elements, but can set it to empty string

    position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: purple }

  • Carlos Guzman•285
    @guztrillo
    Submitted almost 4 years ago

    3-column preview card solution using CSS Grid and one button for all

    1
    Karl Matthews•115
    @karmatt
    Posted almost 4 years ago

    Looks great! Thank you for the tip. By default the button text color is black, so unless you changed it, you just need to set mix-blend-mode to screen.

    Marked as helpful
  • Marko Stanojevic•10
    @greardrear
    Submitted about 4 years ago

    Pure Html and CSS

    2
    Karl Matthews•115
    @karmatt
    Posted about 4 years ago

    So if I understand you correctly no want no white-space around the cards on mobile? You could add:

    • { padding: 0; margin: 0; }

    That selects all the elements and removes any default padding or margin that is on certain elements by default.

Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub