@weldu0
Posted
Hey, @ArijTrad! Here are a few suggestions that you might find helpful:
- Remove
all: unseton<p>Tags:- The
all: unsetrule is very powerful and can reset all styles, including some that you may want to keep (like inheritedfont-familyandcolor). It's better to unset only the specific properties you want to override.
- The
- Add
aria-labelsor Descriptive Alt Text:- Ensure your links and images have clear
aria-labelsor alt text for accessibility.
- Ensure your links and images have clear
- Use
<article>Instead of<section>:- Since the profile card is a standalone component, consider using the
<article>element instead of<section>.
- Since the profile card is a standalone component, consider using the
Overall, the project looks fantastic, especially with the use of CSS variables and Flexbox. I hope you find this helpful. Great work!
@ArijTrad
Posted
thank you so much @weldu0 !
- as for
all:unseton<p>tag, won't it be easier unsetting everything while the styles applied will still be inherited thanks to speceficity - also can u advise me on how to perfection the flexbox, especially vertically since it is not as in the example
@weldu0
Posted
To center the content (within the body) vertically, you can use something like this:
body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh; /* Take full viewport height */
}
-
justify-content: center;: This centers the items vertically along the main axis (since the direction is column, the main axis is vertical). -
align-items: center;: This centers the items horizontally along the cross-axis (which is horizontal in this case). -
height: 100vh;: This ensures that the flex container (the
body) takes up the full height of the viewport, allowing the content to be truly centered. This makes the centering responsive to different screen sizes.
Finally, remove the margin from the .main-container, and if you want to avoid scrollbars, you can set overflow: hidden (though it's not always best practice).
@ArijTrad
Marked as helpful
