Submitted over 1 year ago

Responsive Sunny side landing Page .. React, Sass

#sass/scss#react

Edgar Briandt• 140

@Merxibeaucoup

Preview site View code

This is a solution for...

Sunnyside agency landing page

HTML
CSS
JS

2junior

View challenge

Design comparison

SolutionDesign

Solution retrospective

The mobile nav design was an interesting one .. I did it my way tho :)

Community feedback

Efosa Collins EVBOWE• 365

@efecollins

Posted over 1 year ago

Hi @Merxibeaucoup, congrats on completing this challenge. I have a few things I think you should do if you would:

The nav bar can't be closed, I had to refresh the page to make it go away. Kindly, follow the replies above to solve that.
The background image for your .header div is moving from its place. Add a background-position: center; to make it go nowhere.

Keep pushing forward on your coding journey. Cheers 👍

Edgar Briandt• 140

@Merxibeaucoup

Posted over 1 year ago

@efecollins thank you very much

Wendy• 1,670

@wendyhamel

Posted over 1 year ago

Hi, I noticed the overlapping icons on mobile too. The close icon is also hidden when you open te menu, so users have no way to close it. Next thing I noticed is in between screen sizes from 601px to around 1024px there are issues in yout responsive layout. Things overlap and overflow.

Did you notice there is a design example for the hover states? I only see them in your footer. But not in the main menu or for the 'learn more' buttons.

Happy coding!

Edgar Briandt• 140

@Merxibeaucoup

Posted over 1 year ago

@wendyhamel I only did mobile screen responsive.. I will fix all screen sizes , thank you very much

also I used pseudo elements to create that border underneath the "learn more" link .. and you cant hover a pseudo element..

if there's a better way to create that border I would please move to learn from you , thank you

Wendy• 1,670

@wendyhamel

Posted over 1 year ago

@Merxibeaucoup Good that you fixed the menu close button issue. As for the 'learn more' links, you do not have to hover the pseudo elements, but you hover the <a> element. Like this: .your_link_class:hover::after { -- put your change on hover states here -- }

There are other ways to do this, I used a span and positioned it. But that's not neceessarily better, just my preference.

Happy coding!

Hossam khalaf• 230

@hossam-khalaf

Posted over 1 year ago

Good Job With The Design Edgar! I see a little Problem with the Mobile Nav, The Bars icon doesn't disappear when clicking on it and it shows alongside with Times icon. The quick fix for that is to use conditional rendering with (useState hook) on the icon itself.

also, you can use (position:absolute) on the mobile nav to match the design.

I like the animation so much though.

Good Luck :)

Edgar Briandt• 140

@Merxibeaucoup

Posted over 1 year ago

@hossam-khalaf Thank you , I fixed the issue.I just had to wrap the button icon with an li tag.. to include it in the list

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