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