Question posted in 
when in pc screen it shows full width but when switch to mobile it is not full width looks like it’s width is 80-90% also my constent is overflowing outside so it is not so responsive on mobile whyy [enter image description here]
(https://i.sstatic.net/82Gf6xDT.png)
import React, { useState } from 'react';
import { Link } from 'react-router-dom';
import { TiThMenuOutline } from 'react-icons/ti';
import { GiCrossMark } from 'react-icons/gi';
export default function Navbar() {
const [isOpen, setIsOpen] = useState(false);
const [rotating, setRotating] = useState(false);
const [show, setShow] = useState(false);
const toggleMenu = () => {
setIsOpen(!isOpen);
};
const toggleMain = () => {
setRotating(true);
setShow(!show);
setTimeout(() => {
setRotating(false);
}, 500); // This should match the duration of the rotate animation
};
return (
<div className="bg-custom-gradient flex justify-center">
<nav className=" bg-gradient-to-r from-[#1f353f] via-[#79a8b2] to-[#094c57] shadow-lg border-2 border-white rounded-3xl fixed p-4 w-full font-dongle text-2xl">
<div className="container mx-auto flex justify-between items-center">
<div className="text-white text-4xl font-semibold">
Portfolio
</div>
<div className="relative">
<div className="flex items-center justify-between w-full">
<div className="overflow-hidden w-full">
<div
className={`${
show
? 'hidden md:flex gap-4 ease-in duration-500'
: 'flex gap-4 mt-[-30px] md:mt-[-30px] ease-in duration-700'
}`}
>
<Link
to="/"
className="text-white hover:text-white"
>
Home
</Link>
<Link
to="/about"
className="text-white hover:text-white"
>
About
</Link>
<Link
to="/services"
className="text-white hover:text-white"
>
Services
</Link>
<Link
to="/projects"
className="text-white hover:text-white"
>
Projects
</Link>
<Link
to="/contact"
className="text-white hover:text-white"
>
Contact
</Link>
</div>
</div>
<div>
<div className="hidden md:flex ml-4 justify-end">
{show ? (
<button
className={`text-white hover:text-white ${
rotating ? 'animate-rotate' : ''
}`}
onClick={toggleMain}
>
<GiCrossMark />
</button>
) : (
<button
className={`text-white hover:text-white ${
rotating ? 'animate-rotate' : ''
}`}
onClick={toggleMain}
>
<TiThMenuOutline />
</button>
)}
</div>
</div>
</div>
</div>
<div className="md:hidden overflow-visible ">
<button
onClick={toggleMenu}
className="text-black focus:outline-none focus:text-black ml-[-90px] overflow-visible "
>
<TiThMenuOutline />
</button>
</div>
</div>
{isOpen && (
<div className="md:hidden mt-2 space-y-2">
<Link
to="/"
className="block text-gray-300 hover:text-white"
>
Home
</Link>
<Link
to="/about"
className="block text-gray-300 hover:text-white"
>
About
</Link>
<Link
to="/services"
className="block text-gray-300 hover:text-white"
>
Services
</Link>
<Link
to="/projects"
className="block text-gray-300 hover:text-white"
>
Projects
</Link>
<Link
to="/contact"
className="block text-gray-300 hover:text-white"
>
Contact
</Link>
</div>
)}
</nav>
</div>
);
}
import React from 'react';
import Navbar from '../comps/Navbar';
import Footer from '../comps/Footer';
export default function Home() {
return (
<div className="bg-custom-gradient min-h-screen flex flex-col font-dongle text-4xl w-full">
{' '}
<Navbar />
<div className="flex-grow mt-32">hello</div>
<Footer />
</div>
);
}
// Footer.js
import React from 'react';
import { Link } from 'react-router-dom';
export default function Footer() {
return (
<footer className="bg-gray-800 text-gray-300 py-4">
<div className="container mx-auto text-center">
<div className="mb-2">
<Link
to="/"
className="text-gray-300 hover:text-white mx-2"
>
Home
</Link>
<Link
to="/about"
className="text-gray-300 hover:text-white mx-2"
>
About
</Link>
<Link
to="/services"
className="text-gray-300 hover:text-white mx-2"
>
Services
</Link>
<Link
to="/projects"
className="text-gray-300 hover:text-white mx-2"
>
Projects
</Link>
<Link
to="/contact"
className="text-gray-300 hover:text-white mx-2"
>
Contact
</Link>
</div>
<div className="text-sm">
© {new Date().getFullYear()} Portfolio By Mukund. All rights
reserved.
</div>
</div>
</footer>
);
}
i want my code responsive on mobile also although i use tailwind and i make it mobile responsive i can not got good view on mobile
3
Answers
You need to add
flex-wrap.You are using
flexfor those footer menu items but on mobile there’s not enough space, so they are "breaking" out. By addingflex-wrapto the parent element, those items will wrap when necessary.I edited your code a bit. Still far from optimal but works slightly better.
https://codesandbox.io/p/devbox/angry-yonath-4jwhq3
Lost some of your colors and transitions but just to show the workings.
The white stripe is caused by horizontal overflow on the right edge of the page. This is caused by your footer navigation. This is because React renders elements without any white space between them, so all the
<Link>renders like:And since
<a>elements aredisplay: inlineby default, the browser sees this as one long word like:Causing it to overflow the right side.
Instead, you could consider adding manual spaces between each
<Link>like:Alternatively, you could consider using a horizontal flex layout with wrapping. This may behave more predictably for you. You can also use
gap-*instead ofmx-*on each of the children: