Skip to content
Submitted over 2 years ago

Product preview card component MOBILE (HTML / CSS)

Steven•50
@StevenTheAnalyst
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Product preview card component
  • HTML
  • CSS
1newbie

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
    @sprakamatisPosted over 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; }

    2
  • Elaine•11,400
    @elaineleungPosted over 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!

    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