Design comparison
Community feedback
- @damigandPosted 4 months ago
It's nearly pixel perfect, this is great! Personally though, I think the
main
element should be the.card
itself. You can just use the CSS propertyjustify-content: center
in the body given that it's already aflexbox
element. Also, I don't think the CSS query for smaller screens is necessary. You can combinewidth: 100%
andmax-width: 327px
on the.card
element to make it responsive without using the query. But these are just persnickety things though.Love to see the work!
1@indaqooPosted 4 months ago@damigand,
To address your points:
-
I understand that the main tag is typically used for the main content, which, in this case, is a card. However, I wrote it this way to allow for the possibility of having multiple cards in the main section. This approach will make reusability of styles if we need to add more than one card.
-
I generally follow a component-based perspective in my projects, which helps in maintaining a modular and scalable codebase.
-
There is a note in the example readme.md file regarding CSS for smaller screens: "Ensure content is responsive and meets WCAG requirements by testing the full range of screen sizes from 320px to large screens." This is because some users still have smaller phone screens. I consistently use a mobile-first approach in all of my projects to ensure responsiveness and accessibility.
Thank you for taking the time to review my work.
1@damigandPosted 4 months ago@RobertsPeirags
I can understand the first two points, they're pretty understandable. About the third point though, the solution I suggested (with very little testing on your live site) makes your card accessible even down to 220px of width (with the slight adjustment of
text-wrap: wrap
on the bio), and saves you time in the rest of the queries that you have established for other screen widths. Obviously this is my subjective point of view, neither of us are wrong (or so I'd like to think, sometimes I am wrong :P)1@indaqooPosted 4 months ago@damigand While you can make screen size lover than 320 pixels... 320px is generally considered the minimum width for responsive web design, as it covers most modern smartphones.
But again, I might be wrong on this.
1@damigandPosted 4 months ago@RobertsPeirags Yeah, there's no objective way to determine the right way of doing things. Hey, as long as it works! Love to see your work!
Cheers!
1 -
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