this is my first time to using tailwind
But i got some problem to build a responsive website
The container is not working at Small devices
It works at Medium devices like this: Medium Device
And this one is at Small devices: Small Device
There is the code:
<div className="bg-blackColor min-h-screen">
<div className="container mx-auto py-10">
<div className="flex justify-between">
<div className="flex flex-[2_2_0%] items-center justify-between">
<div className="flex-1">
<img src={EnverLogo} alt="Logo" className="w-[130px] h-[40px]" />
</div>
<ul className="lg:flex justify-between flex-1 hidden">
<li className="text-lg font-bold hover:text-whiteColor text-primaryColor">Home</li>
<li className="text-lg text-opacity-70 hover:text-opacity-100 text-whiteColor">Services</li>
<li className="text-lg text-opacity-70 hover:text-opacity-100 text-whiteColor">Our Project</li>
<li className="text-lg text-opacity-70 hover:text-opacity-100 text-whiteColor">About Us</li>
</ul>
</div>
<div className="lg:flex flex-1 items-center justify-end hidden">
<div className="w-[160px] h-[35px] border-2 border-whiteColor rounded-md backdrop-blur-md" />
</div>
</div>
</div>
</div>
I'm assuming you're wondering why there is no horizontal padding on the small screen. This is because below sm, the width is 100% so of course it would span the entire viewport width. On sm and up, it would look like there is padding because the viewport might be a little larger than 640px and you might have centered it.
If my assumption is correct, you would need to manually provide padding to the container yourself as per Tailwindcss docs:
// tailwind.config.js
module.exports = {
theme: {
container: {
center: true,
padding: {
DEFAULT: '1rem',
sm: '2rem',
lg: '4rem',
xl: '5rem',
'2xl': '6rem',
},
},
},
};