Design comparison
Solution retrospective
I'm pretty much satisfied with the layout still your recommendations are welcome Thanks:)
Community feedback
- @darryncodesPosted almost 3 years ago
Hi Mahnoor,
Some good suggestions already.
- i'd add some
padding-bottom: 20em;to your.headerto help the image not get lost on larger screens - here is some useful information about what css units to use the browser default for font-size is 16px, that is a good starting point for you as it's quite small now
I'd highly recommend checking on this free course
Happy coding!
Marked as helpful0@mahnoork18Posted almost 3 years ago@darryncodes thankyou I tried everything I knew on the header but it didn't work, thanks for helping.
0@darryncodesPosted almost 3 years agoyou're welcome @mahnoork18, I've also updated my comment as I forgot the css units link haha π
0 - i'd add some
- @anoshaahmedPosted almost 3 years ago
To get rid of the accessibility/HTML issues shown in your Report:
- wrap everything in your body in
<main>... OR use semantic tags! .... you can also giverole=""to the direct children of your<body>but that's a little frowned upon... Click here to read more - start your headings with
<h1>, and move up by one level each time <a>should have anaria-label... Click here to read more<li>should be inside a <ul> or <ol>
Good work on this Mahnoor! :)
Marked as helpful0@mahnoork18Posted almost 3 years ago@anoshaahmed thanks for the suggestion I do have h1 at the start I have wrapped 'we are creatives' in the h1 tag :)
1@anoshaahmedPosted almost 3 years ago@mahnoork18 you have h1, h2 then h4. for accessibility reasons, it's better to move up by one level. so instead of h4, it'd be h3 :)))
Marked as helpful0 - wrap everything in your body in
- @MiculinoPosted almost 3 years ago
Good job on completing the challenge, @mahnoork18 !
I had a look at your final solution and here are a few suggestions based on that:
-
On larger screen sizes, the orange img at the top isn't displayed properly - you only see the top of it
-
The text is too small
-
The 4 images at the bottom don't take up the entire available width
-
Responsive design needs a bit of polishing, especially for the .ct-section and the gallery section
Hope this helps. Keep up the good work!
0@mahnoork18Posted almost 3 years ago@Remus432 thanks for the suggestions but I'm struggling to display the gallery of four images as I have two of them mobile version and desktop how do I display the mobile version images given in assets? for text, i have used the clamp function but I feel like the text is too small on the desktop version little help please!
0 -
Please log in to post a comment
Log in with GitHub
Join 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