@zp021
@simplykoon
Submitted
I had a few challenges during this project. I was able to find some answers online and others by moving around a few things. I wasn't able to make the cart icon and the "add to cart" text align properly though. I don't know why. It just doesn't listen!
@zp021
Posted
Hi! What I did for the button was align-items: center; and justify-content: center;
Also for the images you can use <picture> tag to handle the change of images from mobile to desktop view:
<picture><source media="(min-width: 640px)" srcset="./images/image-product-desktop.jpg"><img src="./images/image-product-mobile.jpg" alt="image-mobile"></picture>
Keep it up and happy coding!
Marked as helpful
@vinaygrewal
Submitted
how to make picture round
and how to adjust size of a picture
@zp021
Posted
Hi! Might be a small detail but I noticed that your font is not as per the challenge. This challenge used the Outfit font from google fonts, found here: https://fonts.google.com/specimen/Outfit
You can link it in your html file:
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600&display=swap" rel="stylesheet">Or import it in your css file: @import url('https://fonts.googleapis.com/css2 family=Outfit:wght@300;400;600&display=swap');
Hope this helps and happy coding 👍
Marked as helpful
@Hamid210545
Submitted
This project is amazing and i think there is nothing which is difficult ..... It's easy to build
@zp021
Posted
Congratulations on completing this challenge. I agree, frontend mentor is a great resource to practice web development in a realistic way. I too recently started doing these challenges and love them. You did a good job on your first solution, only thing I can see is what the accessibility report says:
Ensure that all content on your page is contained within a landmark region, e.g <main>
It is considered best practice to start with h1 heading, as you can always adjust its size to fit the challenge design.
Keep it up and happy coding!
Marked as helpful
@Shadowsvg
Submitted
Both paragraph and h3 are not exactly same as required. I tried different margins and paddings but didn't get exact result. Will you please tell me what am I getting wrong ?
Any other suggestions are welcome
@zp021
Posted
Hi! It took me a while to get the text right too. What worked for me was putting the h1 and p in a div called text and adjust its padding along with adjusting h and p padding/margin individually. But as a more experienced user pointed out on my solution, it can be done without that just as you did, so you're the right track, it just needs more tweaking to get it right.
Other than that as the report said, it is best practice that all content on your page is contained within a landmark region, e.g <main> and to use h1 first as you can always adjust its size to fit the challenge. Good job, keep it up!
