Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

3 preview card component

@xenovialara

Desktop design screenshot for the 3-column preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

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!

Community feedback

Marit 400

@Maritxx

Posted

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

0
Fatlind Shehu 2,230

@fatlindshehu

Posted

This comment was deleted

0

Please log in to post a comment

Log in with GitHub
Discord logo

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