Hello Srishtiπ
Congratulations on successfully completing the challenge! π
It's great to see you making these project regularly, I wish I had the consistency like that π΄.
Anyway,
First Of All, A word of advice,
When you want to receive a clear and correct answer, You should ask clear and correct question or explain your problem clearly. It's most important in Coding as well.
Here in your sentence
I really struggled with figuring out the correct tag for preparation time section. I was thinking of using tag but thought maybe it won't be apt for this so ended up using section tag but then the heading for prepartion time was smaller compared to other hedings so had to use for that but then that would mean having an tag before so I put prepation time section in the end in html and then used css to bring it at the top.
I really lost track of what you were saying π. So Keep working on it.
Now for your answer π.
For this Question
I would like help with the preparation time section how could i have done that or did I do it correctly or not?! And also the semantics of other things as well.
- Your preparation section is well written, with all the
h3
and li
.
- The semantics of other things looks good as well
- I would like to know why did you choose to use
article
for this? Just curious.
- Other than that everything looks good.
Great Job
Now For This Question
And also the image thing for mobile I used media query to make position absolute was that the right approach?!
- Well I would say, at the end of the day, if its working, its good π.
- Though Using
position: absolute
may not be the best approach.
-The reason you needed to use position: absolute
was simply because you have this in your code,
(max-width: 38em) { main { width: 100vw; border-radius: 0; padding-top: 43vw; } }
- this
padding
is stopping your image to stick to the top
Another is
main { width: 51vw; background-color: hsl(0, 0%, 100%); padding: 2rem; border-radius: 1rem; }
- Here this
padding
is stopping your img
to cover all the width of the mobile screen.
Here is what you should take into consideration
-
You can just simply separate the image from the rest of the part, and can create two div
, one will have the img
inside of it and another will have the rest of the part.
-
By doing this you can manipulate the margin
and padding
of the both div
independently. Which will help you make the design responsive more easily.
-
You can just remove all the margin
from the div
that has img
inside of it and make it cover all the width
of the screen on smaller devices.
-
That was one approach that I used, You can see it here Github
Well that was all, It sure took a lot of time to write this.
If you need any feedback or suggestions, I am happy to help
I'll be looking forward to your next project, until then
Good Work, Keep Grinding and Have Fun Coding!