Design comparison
Solution retrospective
between 1000px to 800px it looks like the middle card is being squished. This forces the middle paragraph text to become longer.
I was wondering how I could approach this issue so that all flex-items are the same width or setting some type of max height for the paragraph div (text-box)
Community feedback
- @PhoenixDev22Posted about 2 years ago
Hi @Aleroms.
Glad to help.
For your question about screen readonly class
.sr-only
, you can find more here.Action where users affect the website itself is where you use a button. For example, sign-up and purchase actions are often buttons. The user in these situations are creating a new account and completing a monetary transaction, which are actions that affect the website’s back-end. Creating new posts or making comments are actions that change a website’s content and what the user sees.
Actions where users won’t affect the website are where you use a link. These actions that take users from one page to another without changing anything on the website’s back or front-end.
Hopefully this feedback helps
Marked as helpful0 - @PhoenixDev22Posted about 2 years ago
Hi Santiago Morales,
Congratulation on completing this challenge. Your solution looks great. I have some suggestions regarding your solution if you don’t mind:
- About
<h1>
it is recommended not to have more than one h1 on the page. Multiple<h1>
tags make using screen readers more difficult, decreasing your site’s accessibility. In this challenge, as it’s not a whole page, you can have<h1>
visually hidden withsr-only
. Then you can swap those<h1>
with<h2>
- In my opinion, the images are much likely to be decorative. For any decorative images, each img tag should have empty
alt=""
andaria-hidden="true"
attributes to make all web assistive technologies such as screen reader ignore those images.
- What would happen when the user click those learn more? In my opinion, clicking those "learn more" would likely trigger navigation not do an action so button elements would not be right. So you should use the <a>. For future use , it's a good habit of specifying the type of the button to avoid any unpredictable bugs.
- There are some unnecessary div’s need to be HTML.
- On your buttons, add
border: 2px solid transparent;
to the regular state. This way when the hover on the buttons , it doesn't add an additional 4 pixels to the height and width making the elements shift.
hopefully this feedback helps.
1@AleromsPosted about 2 years ago@PhoenixDev22 thank you for your feedback. Nice catch on the <h1> tag, I usually do that but I started on one card and copied the rest. I was wondering, what do you mean by
sr-only
? I've been looking on google for what that is.Also, when do we use buttons vs <a> ?
1 - About
Please log in to post a comment
Log in with GitHubJoin our Discord community
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