CODEWITHSUNDEEP
htmlcsstailwind-csstailwind-3
NotAryan
NotAryan

Reputation: 3

My html navbar not working well in phone screen

Hey I am using tailwind css to complete my website. My navbar doesn't gives me full screen view in phone screen. Please help!!!

ScreenShot of bug Click here

You can check original site hosted on github - Website Link

HTML and Tailwind-CSS :

<nav class="flex justify-between bg-blue-500 w-full">
        <div class="ncrt-sol mx-48 my-6">
            <span class="text-white font-bold text-xl cursor-default">NCERT Solutions</span>
        </div>
        <div class="links">
            <ul class="flex mx-40 my-6">
                <li><a href="#" class="mx-8 text-white font-bold text-lg hover:text-blue-500 hover:bg-white px-6 py-2 hover:rounded-3xl duration-150">Home</a></li>
                <li><a href="solution.html" class="mx-8 text-white font-bold text-lg hover:text-blue-500 hover:bg-white px-6 py-2 hover:rounded-3xl duration-150">Solutions</a></li>
                <li><a href="contact.html" class="mx-8 text-white font-bold text-lg hover:text-blue-500 hover:bg-white px-6 py-2 hover:rounded-3xl duration-150">Contact</a></li>
            </ul>
        </div>
    </nav>

I tried width-full by using w-full class but it is still not working...

Upvotes: 0

Views: 490

Answers (2)

krishnaacharyaa
krishnaacharyaa

Reputation: 24980

Try with class w-screen which will compile to 100%vw

Edit:

The margin of classes ncrt-sol and flex class is too high for mobile devices.

So this is causing the trouble . So instead of mx-40 change it to mx-4

So the final code is :

<nav class="flex justify-between bg-blue-500 w-full">
        <div class="ncrt-sol mx-4 my-6">
            <span class="text-white font-bold text-xl cursor-default">NCERT Solutions</span>
        </div>
        <div class="links">
            <ul class="flex mx-4 my-6">
                <li><a href="#" class="mx-8 text-white font-bold text-lg hover:text-blue-500 hover:bg-white px-6 py-2 hover:rounded-3xl duration-150">Home</a></li>
                <li><a href="solution.html" class="mx-8 text-white font-bold text-lg hover:text-blue-500 hover:bg-white px-6 py-2 hover:rounded-3xl duration-150">Solutions</a></li>
                <li><a href="contact.html" class="mx-8 text-white font-bold text-lg hover:text-blue-500 hover:bg-white px-6 py-2 hover:rounded-3xl duration-150">Contact</a></li>
            </ul>
        </div>
    </nav>

enter image description here

And change the margin likewise and use breakpoints for larger screen like md: lg: and the like.

Hope it helps!

Upvotes: 1

Matthew Ngan
Matthew Ngan

Reputation: 36

The margin left and right of the .ncrt-sol div and .links div are too big for mobile screen and causing it to overflow the body element. Try to use a smaller value for mobile devices.

Upvotes: 1

Related Questions