+ 8

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

31st Jul 2020, 6:53 PM
Qurban Hussain
Qurban Hussain - avatar
29 odpowiedzi
+ 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;
2nd Aug 2020, 2:13 PM
Ore
Ore - avatar
+ 4
RKK can you please explain what i should do? i dont understand what you mean.🤐
31st Jul 2020, 7:17 PM
Qurban Hussain
Qurban Hussain - avatar
+ 4
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
1st Aug 2020, 2:27 AM
maf
maf - avatar
+ 4
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.
1st Aug 2020, 1:56 PM
maf
maf - avatar
+ 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.
31st Jul 2020, 8:06 PM
RKK
RKK - avatar
+ 3
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🤐
31st Jul 2020, 8:15 PM
Qurban Hussain
Qurban Hussain - avatar
+ 3
i'll try🙃👍
1st Aug 2020, 2:40 PM
Qurban Hussain
Qurban Hussain - avatar
+ 3
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❤👈
1st Aug 2020, 8:09 PM
Qurban Hussain
Qurban Hussain - avatar
+ 3
Я видел еще несколько русских здесь😃 thank you google 😅
2nd Aug 2020, 3:54 PM
Qurban Hussain
Qurban Hussain - avatar
+ 2
RKK sure btw thanks
31st Jul 2020, 7:51 PM
Qurban Hussain
Qurban Hussain - avatar
+ 2
benjamin open the code uncomment last media query that is on 782px and then check and also the problem is on 782px resolution🤷‍♂️
31st Jul 2020, 7:53 PM
Qurban Hussain
Qurban Hussain - avatar
+ 2
benjamin bro in simple way i want my nav menu items in bars at 782px like normaly navbars for mobile devices so i'm trying to give 100% width and height to nav menu items but it didnt work🤐
31st Jul 2020, 8:05 PM
Qurban Hussain
Qurban Hussain - avatar
+ 2
maf bro i already try this flex-direction:column but it didnt work😷the items still in row style🤐
1st Aug 2020, 1:17 PM
Qurban Hussain
Qurban Hussain - avatar
+ 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 :)
1st Aug 2020, 8:18 PM
harikethan
harikethan - avatar
+ 2
Qurban Hussain your welcome bro. : )
2nd Aug 2020, 4:00 AM
harikethan
harikethan - avatar
+ 2
Я один сдесь русский человек 👨?
2nd Aug 2020, 3:33 PM
Артём
+ 2
Ore thnaks alot bro🥰👈
2nd Aug 2020, 3:35 PM
Qurban Hussain
Qurban Hussain - avatar
+ 2
Артём i translated your sentence, and i think yes xD
2nd Aug 2020, 3:49 PM
maf
maf - avatar
+ 2
Visit my page
2nd Aug 2020, 3:53 PM
Артём
+ 2
Yes it True
2nd Aug 2020, 3:55 PM
Артём