@Enmanuel-Otero-Montano
Posted
Hello Hayley!
You can use both em and px to give measurements as you want or need. What if it is not a good practice is to specify font sizes with px, for these you should use relative measurements ( em or rem ).
On the other hand, the image of the shopping cart is not visible, since from what I see you located the image through a local path on your computer, you must do it within the project, it should look like this👇
<button class="btn"><img src="./images/icon-cart.svg">Add to Cart</button>
About the image too, I don't know what was the reason that led you to not include the alt attribute, but anyway for this case that is not correct, I think it would be best to include it with an empty string. I'm going to share something about it
The alt attribute holds a text description of the image, which isn't mandatory but is incredibly useful for accessibility — screen readers read this description out to their users so they know what the image means. Alt text is also displayed on the page if the image can't be loaded for some reason: for example, network errors, content blocking, or linkrot.
Note: Browsers do not always display images. There are a number of situations in which a browser might not display images, such as:
- Non-visual browsers (such as those used by people with visual impairments)
- The user chooses not to display images (saving bandwidth, privacy reasons)
- The image is invalid or an unsupported type
In these cases, the browser may replace the image with the text in the element's alt attribute. For these reasons and others, provide a useful value for alt whenever possible.
Setting this attribute to an empty string (alt="") indicates that this image is not a key part of the content (it's decoration or a tracking pixel), and that non-visual browsers may omit it from rendering. Visual browsers will also hide the broken image icon if the alt is empty and the image failed to display. This attribute is also used when copying and pasting the image to text, or saving a linked image to a bookmark.
Cheers!
@Hayley-A
Posted
@Enmanuel-Otero-Montano thank you. The icon showed up fine when I was testing my code in the browser. It wasn't until I submitted to Frontend Mentor that the error occurred. I will use your advice to fix the issue. Thank you so much!
