Empty space on the edge of the mobile screen in Next.js causes usability issues

Currently working on a frontend project using Next.js and Tailwind. Encountered an issue where there is extra space on screens with a width less than 500px.

For instance, if the screen width is 400px, there will be an additional 100px of deadspace. Similarly, at 350px screen width, there will be 150px of deadspace.

When the page loads on a smaller screen (< 500px), the full width, including both the rendered area and deadspace, is displayed.

Even after checking the layout and nesting, it seems that the root <html> element itself is only 400px wide, as depicted in the screenshot below:

https://i.sstatic.net/jzLUy.jpg

You can view the live site here, and inspect the code using devtools.

javascriptnext.jsfrontendtailwind-css

Answer №1

There is a banner on your page that extends beyond the viewport:

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

This overflow is mainly caused by an inner element with a fixed width:

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

Since all child elements are hidden until a certain breakpoint, you could consider hiding the parent element instead:

<div class="hidden md:flex w-80 flex-row justify-between lg:ml-20">
  <h6 class="flex"><a href="/projects">Projects</a></h6>
  <h6 class="flex"><a href="/about">About us</a></h6>
  <h6 class="flex">Contact</h6>
</div>

Even after making this change, there may still be some overflow caused by another element:

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

This issue is related to its fixed width specified by the w-96 class. Consider using max-width instead to allow it to shrink:

<h1 class="mt-36 max-w-sm text-center text-5xl/tight font-normal md:mt-48 md:w-[46rem] md:text-8xl/tight">The Builder Of Opportunities</h1>

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 are the necessary headers that must accompany a post request?

While testing the server with Postman, everything seems to be working fine as I receive a response: https://i.stack.imgur.com/yMRfj.png However, when attempting to make a POST request from the browser using the same address, it results in an error and th ...

javascriptnode.jsexpressexpress-validator

Does anyone else have trouble with the Smtp settings and connection on Servage.net? It's driving me crazy, I can't figure it out!

Whenever I attempt to connect to send a servage SMTP, it gives me this error message: SMTP connect() failed. I have tried using the following settings: include('res/mailer/class.phpmailer.php'); $mail->SMTPDebug = 2; include('res/mai ...

javascriptphpcssemailsmtp

Attempting to input data into elements that have been generated automatically

Trying to set values to elements with automatically generated id's: This code is functional: <input type="tekst" id="<?php echo $item->getId();?>"> <script> document.getElementById("<?php echo $item->getId();?>").v ...

javascriptphphtmlmysqldatabase

Refusing to include two values due to the presence of a comma in JavaScript

I'm trying to add two values with commas and .00 (Example: 1,200.23 + 2,500.44) but it's not working because the textbox includes commas as required by my system. The result shows NaN because the comma is considered a special character. It was w ...

javascriptphpcsshtmlcodeigniter

What is the best way to transmit data to a PHP script using AJAX?

I'm facing an issue with my basic ajax script not running. The code I have should work fine. The ajax script is: <html> <head><title>Testing ajax</title> <script type="text/javascript"> function ajax() { ...

phpjavascriptajaxpostget

Automatic placement of the cursor at the left end of the username field in the registration form is required

Hey there! I'm looking to customize the registration form on my WordPress website so that when a user clicks on any field, such as the username field, the cursor automatically moves to the left end of that field and the keyboard switches to ENG-US. ...

javascriptjquerywordpress

The categories in Vue are not being displayed after they have been fetched

Looking for assistance with Vue rendering. Currently, I am developing a Vue-Wordpress application and facing an issue with retrieving a list of categories for each post. The categories for every post are fetched from the WP API as their respective IDs. I ...

javascriptwordpressvue.jsfetch-api

In React, facing difficulty in clearing setTimeout timer

After clicking the button, I want my code to execute 3 seconds later. However, I'm having trouble achieving this. It either runs immediately or doesn't stop running. <Button onClick={setTimeout(() => window.location.reload(false), 4000), cl ...

javascriptreactjs

Vue Component Unit Testing: Resolving "Unexpected Identifier" Error in Jest Setup

Having just started using Jest, I wanted to run a simple unit test to make sure everything was set up correctly. However, I encountered numerous errors during compilation while troubleshooting the issues. When running the test suite, Jest successfully loc ...

javascriptunit-testingvue.jsnpmjestjs

A guide on implementing a .click function with jQuery

I have a code snippet that is supposed to add 100 to a number in a MySQL table when a button is clicked. However, the code does not work as expected. When I click the button, nothing happens, but if I refresh the page, it adds 100 to the number. Can some ...

javascriptphpjqueryhtmlcss

Content formatted with a gap

I wish to include a gap between each sample usage with markdown. For instance: .kick Sarah, .kick John, .kick Mary .setDescription(`**Usage :** \`${settings.prefix}${command.help.name} ${command.help.usage}\`\n**Example :** \`${setting ...

javascriptnode.jsdiscorddiscord.jsmarkdown

Dealing with empty parameters in NextJs and dynamic routes: What's the best approach?

Is there a way to retrieve the URL parameter without using query strings? For example, in the URL http://localhost:3000/test/1, how can we extract the parameter without facing a 404 page when it's omitted? Directory Structure test - [pageNumber].js ...

reactjsnext.jsdynamic-routing

utilize angular4 to dynamically link images from twitter based on certain conditions

Currently, I am attempting to retrieve the URL of images from tweets only if the tweet contains an image. I have been successful in fetching tweets and some images, but the issue arises when a tweet does not have an image, causing it to break and stop disp ...

javascriptangulartwitter

The Google APIs sheet API is throwing an error message stating "Invalid grant: account not found"

I need to retrieve data from a spreadsheet using the Sheet API. After setting up a project in Google Cloud Platform and creating a service account, I granted the account permission to edit the spreadsheet. I then downloaded the credentials in JSON format. ...

typescriptgoogle-sheetsgoogle-apinext.jsgoogle-sheets-api

Transitioning to TypeScript has brought the promise of imports returning once again

I've been facing some challenges while migrating my extensive project to TypeScript, particularly with handling imports. Being relatively new to programming, I'm unsure if my previous approach was considered bad practice. Previously, I organized ...

javascriptnode.jstypescriptcommonjsts-node

An issue occurred when trying to trigger a click event within a Blazor WebAssembly

While my dropdown menu option was working fine on a tablet-sized display, it suddenly stopped functioning after I published my project and ran the code in Visual Studio 2019 Preview version 16.10. I'm now seeing an error message in the browser console ...

javascriptbootstrap-4dropdownblazor-webassembly

The issue of undefined context in getStaticProps within Next.js

Has anyone encountered the issue where the context from getStaticProps is returning as undefined? Upon logging the context, I am receiving: { locales: undefined, locale: undefined } I require the information from the URL, but when attempting the same with ...

next.jsapollo-client

Utilizing getUserMedia to capture portrait shots with the back camera

I am encountering an issue with starting the back camera in portrait mode using navigator.mediaDevices.getUserMedia in React. The camera does not appear to be taking into account the constraints I have set. Below is how the code looks for initialization: ...

javascriptreactjsnext.jsgetusermedia

Unable to interact with web element using JavaScript

Struggling to find a solution for simulating a click on a button element on Outlook.com mobile website using JavaScript. Despite numerous attempts from online sources, the button remains unresponsive to clicks. An interesting discovery was made that the c ...

javascriptseleniumclickappium

How can I integrate Apple remote support into a website with the use of Javascript?

One thing that I find interesting is the ability to use the Apple remote with Front Row, as well as other apps on Mac that support it. I'm curious about whether Web Apps could also be made compatible through Javascript. I have a concept for a TV-like ...

javascriptjquery