@Yusif70
Submitted
@ayobanjo
@Yusif70
Submitted
@ayobanjo
Posted
Hello @Yusif70, you did well on this challenge
I just have a few suggestions.
To make the main responsive, on all screen sizes, change the width: 300px
to max-width: 300px
Also on the body, set the justify-content: centre
and min-height: 100vh
, with this, you wouldn't need to set the hard-coded margin-top
I hope this helps.
@kagiso101
Submitted
@ayobanjo
Posted
Hi @kagiso101 Good Job on this.
Just a few corrections to make it more responsive and less rigid. Mark as helpful if you like it
HTML
Change the div to the more semantic main tag
CSS
Set the main div to a max-width
instead of width
to make it responsive
Set the img to max-width: 100%
, to always make sure it retains the width of the container
Remove the width and height on the h1, and p tags. They are naturally responsive. Then add a padding
to the main div
Marked as helpful
@ayobanjo
Posted
Hi @IsuruAkalanka, Good job on this. Just a few corrections to make it more responsive. Mark as helpful if you like it
HTML
Make the div a main for a more semantic structure.
CSS
On the div change the width
to max-width: 300px
for responsiveness
Set the img element to max-width: 100%
to always keep it within its container
Marked as helpful
@IndraSaputraIdrus
Submitted
@ayobanjo
Posted
Hi @IndraSaputraIdrus Good job on your first project, lovely
The only observation I have is that for mobile responsiveness, you should use a max-width instead of width on the card div
max-width : 260px
or its equivalent in rem
@villAsh
Submitted
@ayobanjo
Posted
Hello @villAsh. Congratulations on your first submission.
I do have a few corrections you could apply
HTML
For SEO, and proper semantics, you should use the <picture>
tag. This will help you to also change from either mobile img to desktop img depending on what your approach is (mobile-first or not)
picture tag
The Gabrielle Essence Eau De Parfum should be an h1
element, and the perfume a paragraph
For the former price, you can simply use the del
tag
CSS
The height of the img
should be 100%, so it simply fills the available space in its container
The perfume has a letter spacing, which you have omitted, try
letter-spacing: 0.25rem
, or whichever value you find desirable
You can set a max-width
for your main container on the desktop view.
Here is my own solution. I hope you find this helpful my submission
Marked as helpful
@KingJosephI
Submitted
@ayobanjo
Posted
Hello @josephmadras, good Job, I do have a few corrections.
For the perfume, there is letter spacing, which you have omitted
letter-spacing: 0.25rem
or whatever spacing you find desirable.....
Hope this helps
Marked as helpful
@Deepanshu-5288
Submitted
@ayobanjo
Posted
Your solution is elegant, I like it. Just completed this same task myself. The only thing is the margins added/ gap in the mobile view, use gap or margins instead on space-evenly
@aljacly
Submitted
This is my first time creating something with HTML and CSS. Any advice on best practices is appreciated.
I struggle with understanding how to use layouts more effectively, hence why "px" is used a lot when positioning elements.
I am also unsure if I am using CSS selectors correctly with the div tag.
@ayobanjo
Posted
Hello Aljacly, I just submitted this myself, few observations though #CSS
#HTML
Hopefully, I have been of help. Still a lot to be done though
Marked as helpful