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

Intro section with dropdown navigation

Seif Basem 430

@Seif-Basem

Desktop design screenshot for the Intro section with dropdown navigation coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Community feedback

Smith 60

@SmithAldumelo

Posted

hello . you have a very good design but I don't understand the media query you wrote, can you walk me through it? I like the introduction of js but I feel bootstrap would have been preferable.

0

Seif Basem 430

@Seif-Basem

Posted

@SmithAldumelo thanks I appreciate that. can you just be more specific about which part of media query you want to learn about.

0
Smith 60

@SmithAldumelo

Posted

@Seif-Basem everything honestly ... I don't know how to write media query. I laid my hands on the same challenge and my mobile response was poor. if you can, please check through mine and note my errors with solutions. thank you

0
Seif Basem 430

@Seif-Basem

Posted

@SmithAldumelo okay I took a look at your project so I got three things I think they will help you. First thing that we set the media query at three sizes 1200px for big screen, 992px for medium screen and 767px for mobile. what we do is if I used flex box to put two elements in a row. and got to mobile they won't look good so we use media query at 767px to set the direction of flex from row to column. You have a class called "row" try to make under it a media query of max-width:991and type on it flex-direction: column-reverse; it will fix the mobile a little bit. Second thing use Picture element in html it will help you to use two images one for big screens and the other for small ones try to search about it. it is really easy or you can just look at it on my code and you will understand it. honestly I forgot what was the third thing that I wanted to say XD so if I remembered I will tell you.

0
Smith 60

@SmithAldumelo

Posted

@Seif-Basem thank you so much, I will work on the corrections and resubmit.

0
Seif Basem 430

@Seif-Basem

Posted

@SmithAldumelo any time, wish you a greet day

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