Submitted almost 3 years ago

Sunnyside Landing Page with Grid/Flexbox

Matt Jones• 30

@MattJones0813

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Agency landing page

HTML
CSS
JS

2junior

View challenge

Design comparison

SolutionDesign

Solution retrospective

The challenge is not fully complete as of yet.

I changed the height of the header to 100vh which is why the image isn't the same as I thought it gave the user more of an inclination to scroll down to see the rest of the content.

I still have some fixes to implement that I am aware of: JS to make the mobile navigation work. JS to make the header sticky. (Desktop/ Tablet) and an issue where the grid is responsive but one of the divs is a different size @ 50em/ 36em.

I would really appreciate feedback on these issues and potentially how to fix/ implement them!

Community feedback

Luis De Freites• 180

@luismadf

Posted almost 3 years ago

Hi Matt,

I'm currently working on this challenge right now. I want to help you with the following questions:

"JS to make the header sticky" This can be easy solve with a "position: sticky" and it will consume way less resources.

"and an issue where the grid is responsive but one of the divs is a different size @ 50em/ 36em": I personally love to use css grid so I just gave them a grid-template-row: 3fr (for the text div) and 2fr (for the picture one).

I hope it helps and great job! Greetings!

Marked as helpful

Matt Jones• 30

@MattJones0813

Posted almost 3 years ago

@luismadf

Hi Luis,

I wasn't aware of that property, thanks for pointing that out for me!

Brilliant! I shall add these changes when I add the JS for the mobile nav :D

Many thanks!

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