What could be causing the excess space in the right corner of my website's mobile version?

After creating a practice website deployed on Vercel, I ensured it was responsive by incorporating breakpoints for different screen sizes. However, upon viewing the dashboard page on my mobile device, I noticed some unwanted extra space in the top right corner. Additionally, when looking at the index page on desktop view, the footer mysteriously floats above the bottom of the screen. Pictures showing these issues can be found below: desktop view of the footer, dashboard page as displayed in Edge, and dashboard page as shown in Chrome Android. The website was built using React and Tailwind CSS. You can access the website through the following links:

  • Dashboard link -
  • Index Page -

Interestingly, none of these issues were encountered while using the development server. The code snippets are as follows:

/* Index.css custom tailwind classes */
@layer components{
    .cardMainPage{
        box-shadow:0px 0px 15px rgb(0,0,0,0.32);
        @apply flex flex-col items-center justify-start text-2xl gap-5 p-2 py-3 rounded-md bg-white;
    }
    .Icons{
        @apply bg-[#aff0cc] rounded-full h-16 md:h-8 w-16 md:w-8 flex flex-row justify-center items-center cursor-pointer hover:bg-white;
    }
    .HeaderIcons{
        @apply bg-[#aff0cc] p-2 h-8 w-8 rounded-sm hover:bg-white cursor-pointer;
    }
}

React Code : -

 /* Footer React code */
   import React from 'react';
   
    export default function Footer() {
      return (
        <div className='bg-[#5cdb95] text-[#05386b] w-full text-md flex items-center justify-center'>
            <div className='text-center'>
                Made with <b className='text-red-600 text-lg'>&hearts;</b> by <a href="/" className=' underline hover:no-underline'>Soumya Deep Sarkar</a>
            </div>
        </div>
      )
    }

Dashboard code->

/* Dashboard page code */
import React from "react";
import Header from "../header/index";
import Footer from "../footer/index";
import { GrBitcoin, GrGamepad } from "react-icons/gr";
import { SiCodingninjas } from "react-icons/si";
import { FiSearch } from "react-icons/fi";
import { FcSettings, FcBusinessman } from "react-icons/fc";
import { IoMdNotifications } from "react-icons/io";
import {GrChat} from "react-icons/gr"

export default function Dashboard() {
  return (
    <div className="flex flex-col h-screen">
      <Header />
      <div className="flex flex-row h-full">
        <div
          id="left-side-menu"
          className="p-2 px-1 bg-back py-4 flex justify-between h-full flex-col"
        >
          <div className=" flex flex-col gap-3">
            <span className="Icons">
              <GrBitcoin />
            </span>
            <span className="Icons">
              <GrGamepad />
            </span>
            <span className="Icons">
              <SiCodingninjas />
            </span>
          </div>
          <div className="flex flex-col gap-3">
            <span className="Icons">
              <FcSettings />
            </span>
            <span className="Icons">
                <FcBusinessman/>
            </span>
          </div>
        </div>
        <div id="center-menu" className="flex flex-col w-full">
            <div className="bg-[#20d876] w-full flex flex-row justify-between items-center px-4">
                <span className="HeaderIcons my-1"><IoMdNotifications className="text-yellow-500"/></span>
                <form className="w-full flex flex-row items-center justify-center p-1">
                    <span className="relative flex items-center">
                        <input type="text" className="border-2 px-2 rounded-md border-text "/>
                        <span className="absolute right-1 cursor-text"><FiSearch/></span>
                    </span>
                </form>
                <span className="HeaderIcons"><GrChat className="text-yellow-500"/></span>        
                <div>

                </div>
            </div>
        </div>
        <div id="right-side-menu"></div>
      </div>
      <Footer />
    </div>
  );
}

Answer №1

After some investigation, I finally found the solution to the problem at hand. The culprit causing the issue in the dashboard header was none other than the search textbox. By setting its width to 100%, the issue was resolved promptly. As for the footer problem, I realized that defining the minimum height of the window did the trick. Therefore, I set the minimum height to 100vh. In tailwind css, I simply added w-full to the className attribute for the dashboard header and min-h-screen for the parent div containing the footer.

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

Component in NextJS

Is there a way to automatically refresh a remote JSON every 30 seconds in NextJS? I had it working smoothly in ReactJS, but after migrating to NextJS, errors started popping up. The issue seems to be related to certain elements that work fine in my ReactJ ...

Conceal only the anchor tag's text and include a class during the media query

In the anchor tag below, I have a text that says "Add to cart," but on mobile view, I want to change it to display the shopping cart icon (fa fa-cart). <a class="product"><?php echo $button_add_to_cart ?></a> Currently, the variable $bu ...

How can I resolve the iconv-lite error that occurs when setting up create-react-app?

I am facing an issue while creating a React app using the command "npx create-react-app myprojectname". It keeps showing the error "cannot find module 'iconv-lite'". I have tried using "npx --ignore-existing create-react-app myprojectname" and ev ...

Using "Ctrl + C" doesn't seem to have any effect on shutting down my Vite+React server within VS

I'm currently working on a website development project using React and Vite, following a tutorial I found on YouTube. The instructor in the video easily stops the React server by simply pressing Ctrl + C, but when I attempt to do the same, it doesn&ap ...

Achieving Vertical Alignment of Content in Bootstrap 5

I've experimented with different approaches based on search results, StackOverflow suggestions, and examining existing code snippets. Here is the snippet of code I am working with: <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a ...

Is it possible to dynamically close the parent modal based on input from the child component?

As I follow a tutorial, I am working on importing the stripe function from two js files. The goal is to display my stripe payment in a modal. However, I am unsure how to close the modal once I receive a successful payment message in the child. Below are s ...

Adjustable textarea with automatic height based on content and line breaks

Imagine you have a textarea with text that includes line breaks. If you style it like this: textarea { height: auto; overflow: hidden; resize: none; } Upon loading the page, the textarea will only adjust its height based on the content until it enc ...

What advantages does Redux offer?

I've been considering diving into the world of ReactJS lately and I could really use some guidance on when to incorporate Redux. The concept seems a bit complex to me, especially coming from an Angular2+ background. Although I've come across sev ...

How can I style the empty text in an ExtJS grid using CSS?

Is there a specific CSS class for a grid's emptyText? After inspecting the element with Firebug, all I found was: <div id="gridview-1021" class="x-component x-grid-view x-fit-item x-component-default x-unselectable" role="presentation" tabindex=" ...

Troubleshooting a Label Overlapping Problem in Materialize CSS

I've been working on a Materialize project and encountering an issue with pre-filled values in text boxes. Here is a snapshot of the problem: https://i.stack.imgur.com/u13jT.png <div class="input-field col s12 m6"> <input class="" id="us ...

"Aligning the logo and navbar links to appear on the same line

I'm looking to align the logo and the navigation bar links on the same line. The logo should be displayed alone when viewed on a mobile device. Here's how it currently appears: Currently shown on two lines. This is the HTML code for it: ...

Creating a grid layout with alternating patterns

I'm facing a challenge in creating an alternating grid layout using CSS, and it's proving to be more difficult than I anticipated. My goal is to design a layout with two boxes that alternate - first a box containing text, followed by a box displ ...

The issue with Nextjs getStaticPaths is that it is not retrieving data from Firebase Firestore

I'm encountering an issue with fetching dynamic data from firestore in nextjs using getStaticPaths. While rendering the data from firestore with getStaticProps works, I'm facing a problem when trying to access specific item details as it leads me ...

How can I personalize the HTML code of images added to my WordPress articles?

I've been on an extensive search trying to find a solution for this issue. I'm aiming to modify the markup of an uploaded image in WordPress from its current form: <div id="attachment_906" style="width: 590px" class="wp-caption aligncenter"&g ...

Issue arose with emails successfully transmitting when operating locally, yet failing to do so when on domain utilizing

I have developed a web application using React.js with a Node.js server that utilizes nodemailer-sendgrid-transport to send emails through the SendGrid API. Surprisingly, the email sending functionality works perfectly fine when I run the site locally on m ...

CSS :target activates on hover instead of click

I have a slider that is currently functioning well. However, I am facing a small issue. I would like to change the slider image when hovering over one of the <li> elements, instead of clicking on them. Is this achievable? I came across this referenc ...

Ways to identify the visible elements on a webpage using JavaScript

I'm working on a nextjs app , I am looking to dynamically update the active button in the navbar based on which section is currently visible on the page. The child elements of the page are structured like this: <div id="section1" > < ...

The React component designed to consistently render video frames onto a canvas is unfortunately incompatible with iOS devices

I'm facing an issue with my code snippet that is supposed to draw video frames on a canvas every 42 milliseconds. It's working perfectly on all platforms and browsers except for iOS. The video frames seem unable to be drawn on canvas in any brows ...

Enhance your website with a customizable language selection feature using HTML and CSS

Currently, I am in the process of creating a dynamic language selection feature using HTML and CSS. Initially, this is what it looks like: https://i.stack.imgur.com/bhnaA.png Upon hovering over it, this is the effect I want to achieve: https://i.stack.i ...

A guide to customizing nested elements in react using styled-components

Currently, I am utilizing styled components to apply styles to a child element inside a div using nested css. For a demonstration, you can view my example here const customStyles = theme => ({ root: { ...theme.typography.button, background ...