Submitted over 2 years ago

Sunny Side Landing Page CSS GRID

Mahnoor Khan• 455

@mahnoork18

Preview site View code

This is a solution for...

Sunnyside agency landing page

HTML
CSS
JS

2junior

View challenge

Design comparison

SolutionDesign

Solution retrospective

I'm pretty much satisfied with the layout still your recommendations are welcome Thanks:)

Community feedback

darryncodes• 6,430

@darryncodes

Posted over 2 years ago

Hi Mahnoor,

Some good suggestions already.

i'd add some padding-bottom: 20em; to your .header to 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 helpful

Mahnoor Khan• 455

@mahnoork18

Posted over 2 years ago

@darryncodes thankyou I tried everything I knew on the header but it didn't work, thanks for helping.

darryncodes• 6,430

@darryncodes

Posted over 2 years ago

you're welcome @mahnoork18, I've also updated my comment as I forgot the css units link haha 😅

Anosha Ahmed• 9,340

@anoshaahmed

Posted over 2 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 give role="" 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 an aria-label ... Click here to read more
<li> should be inside a <ul> or <ol>

Good work on this Mahnoor! :)

Marked as helpful

Mahnoor Khan• 455

@mahnoork18

Posted over 2 years ago

@anoshaahmed thanks for the suggestion I do have h1 at the start I have wrapped 'we are creatives' in the h1 tag :)

Anosha Ahmed• 9,340

@anoshaahmed

Posted over 2 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 helpful

Mahnoor Khan• 455

@mahnoork18

Posted over 2 years ago

@anoshaahmed got it thankyou

Remus D. Buhaianu• 3,145

@Miculino

Posted over 2 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!

Mahnoor Khan• 455

@mahnoork18

Posted over 2 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!

Please log in to post a comment

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