Having trouble with my phone screen not displaying my html navbar properly

Hi, I'm currently working on my website using tailwind css. I'm facing an issue with my navbar not displaying in full screen on mobile devices. Can someone please assist me with this?

See a screenshot of the bug here

You can visit the original site hosted on github - Website Link

Here is the HTML and Tailwind-CSS code snippet:

<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've already tried using the w-full class for full width but it's still not resolving the issue...

htmlcsstailwind-csstailwind-3

Answer №1

Consider using the w-screen class, which will translate to 100%vw

Edit:

The margin for the ncrt-sol and flex classes is too large for mobile devices.

This may be causing the issue. Instead of mx-40, change it to mx-4

The updated code will look like this:

<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>

https://i.sstatic.net/SMdZk.png

Also, adjust the margins accordingly and make use of breakpoints for larger screens such as md:, lg:, and so on.

I hope this solution helps!

Answer №2

The left and right margins of the .ncrt-sol and .links divs are too large for mobile screens, causing them to overflow the body element. Consider using smaller values for better display on mobile devices.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to align text in the center of a div?

I just created this dropdown menu, but I am encountering an issue. Whenever I resize the div or h4 element, the text ends up at the top. Even after trying to solve it with text-align: center;, the problem persists. Here is a visual representation of what ...

javascripthtmlcss

What methods should I employ to rectify this asymmetrical border?

Within my HTML and CSS table, I've noticed that the first column has a different height compared to the rest. It appears uneven with the columns on its right. Please execute the code snippet below. The specific block I'm referring to is labeled ...

htmlcss

In WordPress, you can add a logo with accompanying text positioned at the bottom of the page

Can someone help me create a header with a logo and text positioned at the bottom next to it? I want the text to be aligned with the bottom of the image. Any suggestions on how to achieve this? Here is the logo image: https://i.sstatic.net/W2S0U.jpg And ...

htmlcsswordpress

Can you assist in resolving this logical problem?

exampleDEMO The code above the link demonstrates how to control input forms based on a button group selection. In this scenario, when a value is inputted on the 'First' Button's side, all input forms with the same name as the button group ...

javascripthtmlangularjs

Showing content from a JavaScript variable once a button has been clicked

Imagine you are using express.js and have a JavaScript variable embedded in an ejs file like this: <%= someVariable %> How can you display the value from this variable on the same page, for instance within a bootstrap modal element (check out https: ...

javascripthtmlnode.jsexpressejs

Angular-dc bar graph failing to display properly

I'm having some trouble creating a bar chart using crossfilter, dc.js, and angular-dc. The rowchart is working properly, but the barchart is not displaying the bars. When I inspect the element in Chrome, I can see the values, and when I force focus, t ...

javascriptcssangularjsdc.js

The child fieldset is oversized with a height of 100%

I am attempting to make a fieldset child stretch to 100%, but the child (ul) is too large and causing overflow (getting cut off in my scenario). Is there a way to stretch the fieldset child to 100% without causing overflow? fieldset { height: 300px; ...

htmlcssflexbox

Update the position of a div when an element becomes visible

Currently, I have 3 titles each with a button underneath to reveal more information about the subject. To toggle the visibility of the content, I have implemented a script that shows or hides the corresponding div when the button is clicked. On smaller de ...

javascripthtmlcssbootstrap-4

Generate a visually dynamic representation of a live website page

I'm curious if it's possible to create a login page similar to the one shown in this image, using HTML, CSS, and Javascript. Instead of a traditional background image, I want the background to display the actual layout of another website, such a ...

javascripthtmlcss

Ways to implement two functions within a single onclick event

Is it possible to call two functions with onclick event? <input id = "test" onclick="func1()"> Can I add another function as well? How would I go about doing that? ...

javascripthtml

Save hyperlinks in a storage system

I need to store an article in a MongoDB database, and some words within the article should be clickable links leading to other pages. However, when I display the article using an EJS template, the anchor tags I added while writing the article appear as pl ...

htmldatabaseexpressejsanchor

Storing a JSON object within a data attribute in HTML using jQuery

In my HTML tag, I am storing data using the data- method like this: <td><"button class='delete' data-imagename='"+results[i].name+"'>Delete"</button></td> When retrieving the data in a callback, I use: $(this) ...

jqueryhtmljson

I am interested in developing a program using Javascript or JQuery that can effectively capture the anchor text within <a></a> link tags

I want to automatically capture the link on my website and create a system where, when users click on a specific link, it opens the captured link in a new tab without requiring browser permission and replaces the current tab with a different link. For exa ...

javascripthtmljquery

Angular JS is encountering an issue where the promise object is failing to render correctly

I'm currently learning Angular and I have a question about fetching custom errors from a promise object in Angular JS. I can't seem to display the custom error message on my HTML page. What am I missing? Below is my HTML file - <!DOCTYPE htm ...

javascripthtmlangularjspromise

I am looking for a way to retrieve the ids of all div elements that have the same x coordinate using document.elementFromPoint in JavaScript. Can someone help me with

Currently, I am facing an issue where I have two divs positioned at the same x coordinate. I am attempting to retrieve the IDs of both divs using document.elementFromPoint(). However, I am only able to receive the ID of one div. var elem = document.elem ...

javascripthtmlcssangularjsreactjs

Show a row of pictures with overflow capabilities

I am looking to develop my own image viewer that surpasses the capabilities of Windows. My goal is to design an HTML page featuring all my images laid out horizontally to maximize screen space. I also want the images to adjust in size and alignment as I z ...

javascripthtml

Interactive CSS Video Gallery Slideshow

Is there a way to create a slideshow video gallery using CSS? I've looked everywhere but all I find are slideshow image galleries. If anyone has any resources or tips on how to do this, please share! This is the kind of video gallery I'm looking ...

htmlcssslideshowvideo-gallery

The Signature Pad loses its focus

My HTML code is using JavaScript with Bootstrap and the Signature Pad. The issue I am facing is related to the Bootstrap Collapse feature. When I set the first panel as default, the Signature Pad does not allow me to sign. However, if I set the third panel ...

javascripthtmlsignaturepad

The slideshow feature on W3 Schools does not start automatically when the page loads

After following the W3Schools tutorial to create a slideshow, I found that the animations are working correctly. However, only three dots appear on the screen and I have to manually click on one of them to view the pictures. var slideIndex = 0; sh ...

javascripthtmlcss

What is the best way to make floating images fill the entire space?

I'm looking to create a grid layout with fixed-sized images, but I'm having trouble getting them to fill up the space properly. Here's what I want: Unfortunately, this is what I'm currently getting: Any suggestions on how I can make t ...

htmlcss