So I have created a website(deployed on Vercel) for practice and built it responsive by having breakpoints for different screen sizes. But now, when I see the same website's dashboard page on my mobile, I see some extra unwanted space in its right-top corner and in its index page's desktop view; the footer is, for some reason floating above the bottom of the screen. I have pictures below of desktop view of the footer and dashboard page as shown in Edge and as shown in Chrome Android. I have built it using React and Tailwind CSS. My website's link is

• Dashboard link - https://build2-eight.vercel.app/dashboard
• Index Page - https://build2-eight.vercel.app/

And in my development server, neither of the issues were encountered. The code is:-

/* 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>
  );
}

CodePudding user response：

The solution for the footer is the following...

Set the height of the header and footer to let's say 4vh and then set the minimum height of the middle to 100vh - 4vh - 4vh.

.bg-\[\#5cdb95\].text-\[\#05386b\].text-xl.p-\[0\.1rem\].text-center.border-b-2.border-\[\#379683\] {
     height: 4vh;
}

.bg-\[\#5cdb95\].text-\[\#05386b\].w-full.text-md.flex.items-center.justify-center {
     height: 4vh;
}

.h-full.w-full {
     min-height: calc(100vh - 4vh - 4vh);
}

CodePudding user response：

I have figured it out. The textbox(search one) is causing the issue in case of the dashboard header. To fix it I just have to define its width to 100% and it worked out. Regarding the footer issue. I had to define the minimum height of the window. So I set min height to 100vh. In tailwind css, for the dashboard header I just put w-full in the className attribute and for the footer I put min-h-screen in the parent div.