All comments

• 

  Francisco Israel da Silva• 80

  @israeljrx

  Submitted almost 2 years ago

  

  News Homepage Main - HTML, CSS, Javascript

  1

  40

  

  Miguel Arciaga• 50

  @sprakamatis

  Posted almost 2 years ago

  Nice work! I see a lot of people disregarding the off-white background, it is great to see that you have used the given background color.

  1
• 

  Steven• 50

  @StevenTheAnalyst

  Submitted about 2 years ago

  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.

  

  Product preview card component MOBILE (HTML / CSS)

  2

  50

  

  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; }

  2