There is somthing wrong with my code. I dont understand what the problem is.😑 | SoloLearn: Learn to code for FREE!

+5

There is somthing wrong with my code. I dont understand what the problem is.😑

I wrote some code. It worked fine on desktop. Then i tried to make it responsive. But there is a problem while responsive to navbar, which i dont understand. Can anyone help me with this🤔 https://code.sololearn.com/WthciGvhmmPC/?ref=app

7/31/2020 6:53:22 PM

Qurban Hussain

30 Answers

New Answer

+2

Add a media query for smaller devices @media (max-width: 60em) { nav { flex-direction: column; } } Also, in your nav rule set, change height: 10vh; to min-height: 10vh;

+3

RKK can you please explain what i should do? i dont understand what you mean.🤐

+3

maybe something like in this link... https://www.w3schools.com/howto/howto_js_topnav_responsive.asp just like most websites out there in the internet, having a hamburger menu (bars) on small screens.

+3

Qurban Hussain it cant fit all that in a mobile screen's width so add a media query for smaller screens where u specify that u want flex-direction: column; for smaller widths so that instead of remaining lke this ■■■ They become like this at smaller screens: ■ ■ ■ check this: uncomment flex-direction to see the difference. https://code.sololearn.com/WKgtmOJyw5Nf/?ref=app

+3

Bro, the structuring of ur html document is really complicated :(. But aside from that: Use this: header nav { display:flex; flex-direction:column; } and increase the height of your header from 10vh.

+2

RKK yes bro i want to do that but i used a FlexBox in NAV but now that FlexBox is bothering me i dnt knw what to do now🤐

+2

i'll try🙃👍

+2

harikethan Thanks bro it is very informative for me. as u said i should add a button in the bars div where i added a hamburger icon. am i right yeah i am already trying to get grip on flrexbox. your answer cleared my mind of what i whould do with this code. thanks once again❤👈

+2

If you are unable to change the values and make it work as i mentioned. just leave a reply i will share the changed code. I just wanted you to try tats it :)

+2

Qurban Hussain your welcome bro. : )

+2

Я один сдесь русский человек 👨?

+2

Visit my page

+2

Я видел еще несколько русских здесь😃 thank you google 😅

+2

Yes it True

+2

🙂 😁 😃

+2

+2

Hi i used my tablet and it works fine

+1

What is happening? What should happen?

+1

RKK sure btw thanks

+1

benjamin open the code uncomment last media query that is on 782px and then check and also the problem is on 782px resolution🤷‍♂️