Submitted 12 months ago

Product Preview Card Challenge with flexbox

MatthewA77• 40

@MatthewA77

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Product preview card component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

I can't find a way to solve the :hover function, its just applying it to the svg element and not the whole button. Can you guys tell me how to fix it?
How to improve my css code because I feel that my code is not practical and simple

Community feedback

sivin• 350

@Sivin-Wi

Posted 12 months ago

Code Reformat :

   <div class="btn">
        <button><i class="fa fa-shopping-cart" aria-hidden="true"></i>&nbsp;Add to Cart</button>
     </div>

Important thing : "fa fa-shopping-cart" . take icon from " font awesome 4.7 🤔" icons.

Hover Effect:

.btn> button {
    padding: 1em 4.4em;
    border-radius: 0.5em;
    background-color: hsl(158, 36%, 37%);
     border: none;
    color: hsl(0, 0%, 100%);
   }

btn>button:hover {
    background-color: hsl(169, 38%, 25%);
   cursor: pointer;
}

Try to learn FlexBox
Try It if it Work or not 🐱

MatthewA77• 40

@MatthewA77

Posted 12 months ago

@Sivin-Wi

Hi, thank you for the feedback. Can you explain the meaning of your solution :)

sivin• 350

@Sivin-Wi

Posted 12 months ago

@MatthewA77

keep Learning & Try to catch me 👻

sivin• 350

@Sivin-Wi

Posted 12 months ago

@MatthewA77 use flexbox to align items faster way & for using svg code first try to save svg code to the file and add extension to file while saving eg: " img.svg " and use <img> element to add img src to " src attribute " . don't add svg code directly on html code it couldn't work ✊

sivin• 350

@Sivin-Wi

Posted 12 months ago

@MatthewA77

don't add space between "button:hover"

MatthewA77• 40

@MatthewA77

Posted 12 months ago

@Sivin-Wi

Okayyy thanks for the tips on the svg stuff. I will catch you hahahaha 😎😎

MaximilianoDanielGarcia• 2,000

@MaximilianoDanielGarcia

Posted 12 months ago

Hi Matt, great job!

If you want to add hover effect to the button you have to indicated it like this #add-to-cart:hover {}

And if you want to center the card just remove margin from your body tag and add this:

body {
   display: grid;
   place-items: center;
   min-height: 100vh;
}

Let me know if these was helpful

MatthewA77• 40

@MatthewA77

Posted 12 months ago

@MaximilianoDanielGarcia

Thanks for the feedback, I already apply the :hover to the button through CSS but it only works when I hover my cursor on the svg element

MaximilianoDanielGarcia• 2,000

@MaximilianoDanielGarcia

Posted 12 months ago

@MatthewA77

I review your code and you have one space between the id and the hover selector

#add-to-cart :hover {
    background-color: #1E4033;
    cursor: pointer;
}

Just, remove it and that's it.

MatthewA77• 40

@MatthewA77

Posted 12 months ago

@MaximilianoDanielGarcia

Wow I never expected that haha.. Thanks btw for the solution, very much appreciated.

Please log in to post a comment

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