OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

Why max width not working in tailwind css?

  • Thread starter Thread starter Shakil Ahmed
  • Start date Start date
S

Shakil Ahmed

Guest
I have set max width to max-w-screen-2xl but the navbar is ignoring that and going outside the max width value. I have set max-w-screen-2xl for other sections and they are just workingfine. How to fix this? enter image description here

Code:
<div className='flex items-center justify-center max-w-screen-2xl mx-auto'>
            <div className="navbar nav-container bg-base-100 max-w-[90%] w-[90%] fixed top-3 z-50 px-8 py-6">
                <div className="navbar-start">
                    <div className="dropdown">
                        <label tabIndex={0} className="btn btn-ghost lg:hidden">
                            <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 6h16M4 12h8m-8 6h16" /></svg>
                        </label>
                    </div>
                    <button  onClick={()=>navigate('/')} className="btn btn-sm btn-ghost normal-case text-xl">daisyUi</button>
                </div>
                <div className="navbar-center hidden lg:flex">
                    <ul className="menu menu-horizontal p-0">
                        <li><a>Item 1</a></li>
                        <li><a>Item 3</a></li>
                    </ul>
                </div>
                <div className="navbar-end">
                    <button onClick={()=>navigate('/register')} className="btn btn-sm">Register</button>
                </div>
            </div>
        </div>
<p>I have set max width to <strong>max-w-screen-2xl</strong> but the navbar is ignoring that and going outside the max width value. I have set <strong>max-w-screen-2xl</strong> for other sections and they are just workingfine. How to fix this?
<a href="https://i.sstatic.net/e04GI.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/e04GI.png" alt="enter image description here" /></a></p>
<pre><code><div className='flex items-center justify-center max-w-screen-2xl mx-auto'>
<div className="navbar nav-container bg-base-100 max-w-[90%] w-[90%] fixed top-3 z-50 px-8 py-6">
<div className="navbar-start">
<div className="dropdown">
<label tabIndex={0} className="btn btn-ghost lg:hidden">
<svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 6h16M4 12h8m-8 6h16" /></svg>
</label>
</div>
<button onClick={()=>navigate('/')} className="btn btn-sm btn-ghost normal-case text-xl">daisyUi</button>
</div>
<div className="navbar-center hidden lg:flex">
<ul className="menu menu-horizontal p-0">
<li><a>Item 1</a></li>
<li><a>Item 3</a></li>
</ul>
</div>
<div className="navbar-end">
<button onClick={()=>navigate('/register')} className="btn btn-sm">Register</button>
</div>
</div>
</div>
</code></pre>
Continue reading...
 

Latest posts

B
Replies
0
Views
1
Blundering Ecologist
B
Top