Latest solutions
Latest comments
- @TrueKarter@g-pg
Regarding the "rem" unit, yes, it is a relative unit based on the font size set on the root element of your page. This means that changing the font size of this element will automatically affect everything that uses "rem" as a unit. Additionally, the font size that "rem" is based on can be adjusted by the user in their browser settings. By using "rem," your website can adapt to the user's preferred appearance.
As for the text alignment, if a line of code gets the job done, it's fine. From my experience, I rarely use "space-evenly" when justifying content with flexbox. I prefer using "space-between" as it provides better control over the alignment of an element with others. Unlike "space-evenly," "space-between" doesn't create additional space at the edges of the box and ensures that the flex items touch the box.
Regarding the use of media queries, I don't believe it's necessary in this case. The size of the card is already small, and it can easily be made responsive without relying on media queries.
Marked as helpful - @anishamurthy@g-pg
To center an element you could try using
display: flex; justify-content: center; align-items: center;
on the parent element (the <body>, in your case).
Don't forget to set a height on the parent as well, so it knows what is the center. Normally I already set a "min-height" of 100vh on the body everytime I start a new project.
Marked as helpful - @alesbe@g-pg
Hey @alesbe!
Nice solution!
I noticed some improvents you could make. Some of them would fix these warnings you received on your accessibility report.
- Try to always wrap the main content of your page in <main> tags.
- Avoid using <h2> if there's no previous <h1> on the same page. The best practice to ensure accessibility is following an order of heading tags.
- Don't forget the "alt" attribute in your <img> tag. This is what screen readers read. Also, it's the alternative text for images that doesn't load for some reason.
- You put text directly inside a <div> tag. It would be more appropriate to wrap your text inside a <p> tag in this case. Again, this is for accessibility purposes.
Marked as helpful - @rebcop@g-pg
Hey, Rebecca.
The <section> tag would be appropriate in this case. It points to a semantically distinct element on your page, as is the case of a "card".
Marked as helpful - @Layomi1@g-pg
Hey Layomi.
To correct the text alignment you could try to increase the font-size. Also, it's a good practice to use "em" or "rem" units on font sizes instead of pixels. They are proportional to the user's browser settings, making them more responsible.
Another tip is to avoid using an <h3> tag if you didn't use an <h2> and so on. Ensure your heading tags follow an order.
Finally, you could wrap all your content inside the <body> tag in a <main> tag, since the card is your main content in this page.
Marked as helpful - @sumitmukharjeeeeee@g-pg
Try to reduce the font size of both the title and the description!