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

Another Html and CSS

Exileurt 100

@Exileurt

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


In Mobile size, i dont know how to make a dropdown list like the solution.... maybe javascript ?

Community feedback

Nick 160

@HarmoniaCodes

Posted

Hello! Visually, the layout looks good. However there is an issue with your code not being responsive to mobile layouts. This can be achieved using media queries. Check this link for more info.

https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

In regards to your question about collapsible mobile menus, check out this guide from W3 schools. You are correct that Javascript is a solution for this!

https://www.w3schools.com/howto/howto_js_mobile_navbar.asp

Marked as helpful

0
Maxime 430

@maxime927

Posted

Hi Exileurt, hope you're fine :)

  • Concerning the burger menu in mobile, you can, of course, use javascript and consider you menu as a fixed block hidden on the right of your screen, or you can use a css tricks by using a <input type="checkbox" /> before the <nav> element and slide the navigation when your menu button as a checkbox is checked : HTML
<label for="menu">
    <i class="icon-hamburger"></i>
</label>
<input id="menu" type="checkbox" />
<nav>
    ....
</nav>

Styles

.wrapper { overflow-x: hidden; } /* to prevent the scrollbar */
nav { position:fixed; width: 250px; right: -255px; transition: .3s right ease; background-color: white; }
input:checked + nav { right: 0px; } 

Hope it helps...

Maxime

Marked as helpful

0

Account Deleted

Hi; yes, you need javascript to implement the menu in mobile, search for a 'side menu' tutorial it will help, cheers for the hard work

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