Design comparison
Solution retrospective
The desktop design breaks when the width is less than 502px, I would like to know how I can fix this so that the layout does not break before reaching the mobile design.
Community feedback
- @TheFoxianPosted almost 2 years ago
Hey Harley! Congratulations on completing this challenge. I've gone through your code and viewed you site preview. Here are my few findings listed below:
- I believe that by this statement "The desktop design breaks when the width is less than 502px" you must be referring to the image getting center aligned vertically. This is causing because of the wrapper card has display flex and align-items is set to be centered this yields the image getting center aligned with respect to the textual content. You can simply avoid this by changing the media breakpoint.
- By default for responsive media breakpoints, please refer to the official documentation Ideally max-width: 575px is the best breakpoint for smaller devices and min-width: 576px for min media breakpoint.
- For the card image source tag must be used hen we have to show 2 different images for 2 different screen sizes. Please read more about source tag through the official documentation.
Other than these feedbacks Kudos to you for completing this challenge.
Thanks, Enjoy coding :)
Marked as helpful1 - @Rioba-IanPosted almost 2 years ago
Hi Harley,
I believe your solution is quite great and spot on. I've looked also at your code and where the breakpoint is defined is at 376px. Defining the break points is usually relative --- allow me to refer to one of Kevin Powell's lessons on responsive design -- you can define a break point based on where your layout breaks, in this case you can define the max-width at 570px or there about.
Mobile screens and small screens are usually at max-width: 600px which is used in most cases, but the best break points is based on where your layout breaks.
Marked as helpful1
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