What challenges did you encounter, and how did you overcome them?
the problem i had was when i was unable to center my content(main-container)
@AutumnsCode
Posted
Well done for completing this challenge.
I believe the width of the main container should be smaller.
Best regards
Marked as helpful
@InaolajiRidwan
Posted
the width of the container has been rectified. Thank You
@danielmrz-dev
Posted
Hey there! šš½āāļø
Congrats on finishing the challenge! ā
Your project looks awesome!
Here's a tip that might interest you:
š When you have different versions of the same image, consider using the <picture> tag.
This will help ensure the correct image loads on the user's device, saving bandwidth and boosting performance.
Example:
<picture>
<source media="(min-width: 768px)" srcset="{desktop image path here}">
<img src="{mobile image path here}" alt="{alternative text here}">
</picture>
Hope you find this useful!
Great job overall!
@InaolajiRidwan
Posted
@danielmrz-dev can you explain further please coz i dont understand your point
@danielmrz-dev
Posted
@InaolajiRidwan
On this project, you have two versions of the perfume image: One for the mobile version and one for the desktop version.
In cases like this, when you have different versions of the same image, it's a good practice to use the <picture> tag, because it allows you to specify which version of the image should be loaded based on the size of the screen.
You didn't do that, so your desktop version is using the mobile version of the image. This is stretching the image.
@InaolajiRidwan
Posted
@danielmrz-dev noted and thank you very much
@danielmrz-dev
Posted
@InaolajiRidwan
If the comment was helpful, please consider marking it as helpful ššš½āāļø
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
