Skip to content
Submitted almost 3 years ago

3 preview card component

xenovialara•80
@xenovialara
A solution to the 3-column preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Can someone please help me with these: 1.For some reason I'm not able to make my button's background transparent so for some internal peace swapped it with opacity property. 2. Rounded Borders(border- radius) when the page size is reduced.

Any suggestions/guidance/pressing concerns are welcome !! XD Peace!

Code

Please log in to post a comment

Log in

Community feedback

  • Marit•400
    @Maritxx

    Hey!

    You set the background-color and color on your buttons by including the ID of your div (#cardtwo button). You then tried changing them by selecting just the button element (button:hover). ID's are more specific than elements, so you were unable to change the background-color and color (it was overridden by the color/background color you had set on the #cardtwo button). Opacity worked, because you had not set that property before, so it did take effect.

    For the :hover effect to work in this code, you'll have to target #cardtwo button:hover. You can also change your styling to just target 'button' instead of '#cardtwo button', your button:hover will then also work.

    It might help you to look into CSS selectors to learn more about this. ^^

    Marked as helpful
  • Fatlind Shehu•2,230
    @fatlindshehu

    This comment was deleted almost 3 years ago

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