Design comparison
SolutionDesign
Community feedback
- @clarkjr2016Posted 4 months ago
Hello @ramiroWeb.
Congratulations on completing the challenge.
Below I have a list of some notes that could make your project more accessible and responsive.
- The divs with the classes
.about-content
and.links
could be replaced as<section>
elements to make your HTML more semantic. - The value for your
alt
attribute on your<img>
element with theclass
of.photo-profile
could be more specific about what the image is, something as simple as "avatar photo profile". - Your
<main>
container element isn't responding to different viewport widths. To be very transparent, I struggled with this myself but after reviewing previous comments on my past work I developed a workable solution:
- You can add
padding
around the interior of the<body>
element so that your.container
has space between it's border and the border of the body element. - Then you can set
display: flex
,flex-direction: column
,justify-content: center
, andalign-items: center
on the<body>
element so that the.container
element is positioned in the middle of the<body>
element. - Finally I would apply
max-width: 100dvh
to the<body>
element so that as the viewport width decreases so would the<body>
element's.
Marked as helpful1 - The divs with the classes
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