Novo curso! Todo programador deveria aprender IA generativa!
Experimente uma aula grƔtis+ 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
29 Respostas
+ 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;
+ 4
RKK can you please explain what i should do? i dont understand what you mean.š¤
+ 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
+ 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.
+ 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
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š¤
+ 3
i'll tryšš
+ 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ā¤š
+ 3
ŠÆ Š²ŠøŠ“ŠµŠ» ŠµŃŠµ Š½ŠµŃŠŗŠ¾Š»ŃŠŗŠ¾ ŃŃŃŃŠŗŠøŃ
Š·Š“ŠµŃŃš
thank you google š
+ 2
RKK sure btw thanks
+ 2
benjamin open the code uncomment last media query that is on 782px and then check and also the problem is on 782px resolutionš¤·āāļø
+ 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š¤
+ 2
maf bro i already try this flex-direction:column but it didnt workš·the items still in row styleš¤
+ 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
Ore thnaks alot broš„°š
+ 2
ŠŃŃŃŠ¼ i translated your sentence, and i think yes xD
+ 2
Visit my page
+ 2
Yes it True