Submitted about 2 years ago

Product preview card component MOBILE (HTML / CSS)

Steven• 50

@StevenTheAnalyst

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

What's the best way to 'group' the button icon and button text together to target for CSS? I tried using the float attribute but it moved the whole button instead of the components inside it. I ended up resorting to applying paddings to each one individually.

Community feedback

Miguel Arciaga• 50

@sprakamatis

Posted about 2 years ago

Hello, wonderful work!

If I understood your question correctly, the answer to that is you can wrap the button text inside a <span> and then wrap both the button <img> and <span> inside the <button> element then use display flex on the button element.

Here is an example: (HTML) <button class="add-to-cart"> <img src="images/icon-cart.svg" alt=""> <span>Add to Cart</span> </button>

(CSS) .add-to-cart { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 1em; padding: 1em; }

Elaine• 11,400

@elaineleung

Posted about 2 years ago

Hi Steven, I think Miguel's answer above should help you with your question. Well done with making the button still look good though! Some quick suggestions I have:

It's great that you started with the mobile first approach. Now that you got the mobile version, try the desktop one, and also try putting the background color on your <body> tag as right now it's only on the "mobile" background, or if you prefer a container div instead, you can add one under the <body> tag and put the background color there instead.
You can consider using custom variables instead; these are variables that you can set up in the :root selector, and once you set them up, you can use them throughout your CSS without needing to copy/write out the color codes, like this:

:root {
  --clr-cyan: hsl(158, 36%, 37%);
  --clr-cream: hsl(30, 38%, 92%);
}

body {
  background-color: var(--clr-cream);
}

I also recently completed this challenge, and you can check it out here to see if it helps you: https://www.frontendmentor.io/solutions/card-component-using-cube-css-tNaBY0y_Nx

Hope this helps!

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