Design comparison
SolutionDesign
Community feedback
- @RioCantrePosted almost 3 years ago
Hello there! Good job in this challenge. Viewing the solution, I think you should consider the following as well…
- Use semantic tags, for HTML structures, refer it with this one Semantics
- Instead of
nav
, wrap this line<nav class="navigation">
withheader
tag - Wrap the 4
section
withmain
tag to organize the code - Increase the breakpoints or add another one for Tablet view, the sections tend to compress each other between
899px - 377px
width - Simplify the margin in the
p
,img
andh3
intomargin: 0 auto;
and padding intopadding: 1rem;
for mobile view - Add
font-size: 35px;
in the heading of each sections - In the
.footer .newsletter .newsletter_input
rule sets, adjust the flexbox direction into flex-direction: row;. Remove
margin-left: auto;and
margin-right: auto;, adjust into
margin: 0 auto;` - Adjust the logo size into
width: 195px;
in the.footer .about-and-contact img
and.navigation_logo img
rule set
Above all, Well done! Keep it going!
Marked as helpful0
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