What are you most proud of, and what would you do differently next time?
i learned alot during this project and i even add some tweaks in the learning tag and the profile picture of the author
What challenges did you encounter, and how did you overcome them?
the challenge was in the text as i wasn't quite sure how to categories them but i was able to add the arrow which points to the child directly
What specific areas of your project would you like help with?
i think my projects are wide and it's scale is larger than the original designs and i am not sure how to scale it down a little bit
@Bamo-D-Abdallah
Posted
Doesn't look too wide to me, you shouldn't aim for 100% match.
But I strongly advice avoid using id as CSS selector, the only time I use ID is when I target the element in JS, never in CSS, use class selectors intead.
Marked as helpful
@krushnasinnarkar
Posted
Hi @Saoud2021,
Congratulations on successfully completing the challenge! Your code is well-structured, and the website works perfectly across different screens.
I have a suggestion regarding your code that I believe will be of great interest to you.
As you mentioned, your card looks wider. This is because of the width you have given to the .container. Change that width to max-width: 384px;:
.container {
max-width: 384px;
}
Also, add some padding to the body so that there will be a gap between the card and the small screen edges:
body {
padding: 10px;
}
I hope you find this helpful, and I would greatly appreciate it if you could mark my comment as helpful if it was.
Feel free to reach out if you have more questions or need further assistance.
Happy coding!
Marked as helpful
@hmac100
Posted
Hi Abdullah Looks pretty good to me - I reckon the max-width suggestion from Krushna is a really good idea I noticed the avatar and author name are a bit out of alignment . For what it's worth - I wrapped both in a container - that seemed to do the trick.
<div class="author">
src="./assets/images/image-avatar.webp" alt="avatar of james hooper"/>
<div class="author-name">Greg Hooper</div>
</div>
Then used display:flex and align-items:center on the .author class
Well done 👍
@Saoud2021
Posted
thank you for letting me know , i have found the problem to be in the margin-bottom , but i changed the code a little bit to make it more specific thanks@hmac100
@t3m4g
Posted
For the profil use "align-center" to get a better result
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
