@amalkarim
Posted
Hi Raahim,
Congratulations for completing the challenge!
It took 3 days just to figure out some things, that means you studied hard. Great job!
Let me point out some things to improve the styling.
- Remove
height: 100vh;from<div class="box">. Let the box has automatic height based on its content. - Change
<div class="con"></div>to<main></main>to remove one of the warning in accessibility report section. - Add padding to the
bodyto give enough space around the content. - Remove
border-radius: 15px;from both.imgaandcard. Addborder-radius: 15px;andoverflow: hidden;to<div class="op">. - Remove any
heightandmax-heightproperties from<div class="card">and its children elements in mobile view. Let it has automatic height based on its content.
Please note that this comment is my personal approach. It could be right or wrong. Also, apart from those pointers, there's still a lot of room to improve. At least, I hope these could give you a new perspective.
Happy coding!
Marked as helpful
@raahim21
Posted
@amalkarim Mr Karim, do you have a better way to make the website responsive?, anyways Thank you Mr.Karim that helps a lot.
@amalkarim
Posted
@raahim21 to make website responsive, generally you could use either display: flex; and/or display: grid; coupled with @media queries, just like what you've done in this project. If you want to see how I've done it, feel free to check them out. It's not the best solution though. There are quite a lot of accessibilities issue. But overall it works.
Marked as helpful
@raahim21
Posted
@amalkarim ok Mr.Karmin! Thank you for your helpful reply! But how do I make the content in a box adapt based on his parent container? and how should I center .op, when I remove 100vh from .box, the .op comes on top, what can I do to avoid it sir?
