Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

responsive news homepage using Flex-box and Grid

P
Kellen Ruyleโ€ข 930

@rule-kells

Desktop design screenshot for the News homepage coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


Feedback is welcomed!

Community feedback

Kamasah-Dicksonโ€ข 5,610

@Kamasah-Dickson

Posted

But next time your close button should be in the same div of the nav-links

E.g

`` 1. <button>btn</button>

  1. <li> links</li>
  2. <li> links</li>
  3. <li> links</li> ``

This prevent the close button from scrolling outside of view.

besides you did really great๐Ÿ‘

0
Kamasah-Dicksonโ€ข 5,610

@Kamasah-Dickson

Posted

Hi there๐Ÿ‘...I think you really did a great Job there..keep it up.. ๐Ÿ‘

  1. On the navigation on mobile, the height is not covering the entire vertical screen on mobile when opened. always use 100vh which is 100% a devices viewport height instead of just using height:100%.

Besides you did a very great job.๐Ÿ‘ Happy Coding๐Ÿ‘

0

P
Kellen Ruyleโ€ข 930

@rule-kells

Posted

@Kamasah-Dickson Hey! thanks for the feedback. Yeah, I noticed that too. I have the navigation set to 100vh but for some reason doesn't work properly. If you have any suggestions, I would appreciate it.

0
Kamasah-Dicksonโ€ข 5,610

@Kamasah-Dickson

Posted

@rule-kells try position fixed and see, sometimes it works

1
P
Kellen Ruyleโ€ข 930

@rule-kells

Posted

@Kamasah-Dickson yep that worked! thanks!

0
Kamasah-Dicksonโ€ข 5,610

@Kamasah-Dickson

Posted

@rule-kells you are very welcome๐Ÿ‘

0

Please log in to post a comment

Log in with GitHub
Discord logo

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