Skip to content
Submitted over 1 year ago

Responsive random advice generator build with React (no figma file)

Anthony Nanfito•120
@ananfito
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Advice generator app
  • HTML
  • CSS
  • JS
  • API
2junior

Design comparison

SolutionDesign

Solution retrospective

Aside from advice about best practices, I have one question in mind for this project:

How to adjust the active state of the button for mobile?

I noticed when I viewed the live version on my mobile device, after clicking the button to generate a new piece of advice, the "glow" effect around the button remained in affect. In other words, it did not reset to the normal button. There was still a neon green box-shadow on the button.

I'm sure I need to adjust the media query or something to fix this. Any help would be appreciated. Thank you.

Community feedback

  • Josh Javier•830
    @joshjavierPosted over 1 year ago

    Hello Anthony! I got curious myself and I found this: Solving Sticky Hover States with @media (hover: hover)

    tl;dr You have to move the hover style in a media query so it will only get applied to devices that have hover capability.

    To preserve the glow effect when we actually tap the button on mobile, we need to add a rule that applies the same style to the :active state:

    .btn:active {
box-shadow: 0 0 25px 1px var(--neon-green);
}

@media (hover: hover) {
.btn:hover {
box-shadow: 0 0 25px 1px var(--neon-green);
}
}

    Hope it helps :)

    Marked as helpful
    1
    Anthony Nanfito•120
    @ananfitoPosted over 1 year ago

    @joshjavier brilliant! That works! Thanks so much for the help and for the article with the description. I bookmarked that for future reference.

    1

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