I am using tailwind css vanilla and I want to create a navbar inside the flex item that I have assigned as the visual page header content placeholder.
I encounter a problem while working on this, I have added padding all around with p-8 to the navbar element and I have notice that the navbar is overflowing over the flex item that is holding it.
I do not understand why is this behavior happening because I have added overflow-hidden to the flex item that is holding the navbar. Padding is not considered to be content?
I have tried different combination with display property and also with positioning, all without any result, therefore I need some help.
This is what I have done so far.
<link href="https://unpkg.com/tailwindcss#2.0.3/dist/tailwind.min.css" rel="stylesheet"/>
<div class="container mx-auto px-4 h-screen">
<div class="flex flex-col h-full content-start">
<div class="flex-grow w-full overflow-hidden bg-gradient-to-r from-purple-400 via-pink-500 to-red-500">
<nav class="p-8">
<a class="" href="#">
Home
</a>
<a class="" href="#">
Products
</a>
<a class="" href="#">
Discounts
</a>
<a class="" href="#">
Customers
</a>
</nav>
</div>
<div class="flex-grow my-px px-px w-full overflow-hidden bg-gradient-to-r from-purple-400 via-pink-500 to-red-500 h-full">
<!-- Column Content -->
2
</div>
<div class="flex-grow my-px px-px w-full overflow-hidden bg-gradient-to-r from-purple-400 via-pink-500 to-red-500 h-5">
<!-- Column Content -->
3
</div>
</div>
</div>
Thank you!
L.E. If you shrink the browser, the when the flex column item shrinks it overlaps the previous item. I have shrieked the browser window and I have notice that element 1 of the flex box is going under element 2 and if I go further I'm left only with element 3, the other 2 are going behind the last element 3 of the flex-box.
Related
Newbie here and just getting acclimated to Tailwind and CSS. I want to ensure the structure of my elements are correct prior to moving forward. I'm trying to create a dashboard consisting of i) a fixed top nav bar, ii) a fixed left sidebar and iii) a fixed submenu.
A couple questions:
At the moment I've hacked together something that works, but uncertain if I'll run into problems later on down the road. Are my fixed and flex divs sufficient to accomplish i through iii above?
The fixed submeu (id="sub-menu") I can't get to stay "sticky" relative to the top of the id="dashboard content"
Here's my code thus far. Would be grateful for any pointers or direct towards resources that elaborate on something similar.
<body>
<!-- Top Nav Bar -->
<nav class="sticky p-4 bg-myDarkGrey shadow-md top-0 z-50">
<div class="flex justify-between">
<!-- Logo Left Side -->
<div class="flex">
<img src="img/logo-placeholder.png" alt="" class="w-10 h-10" />
</div>
<!-- Profile Right Side -->
<div class="inline-flex">
<img
src="img/6991.png"
alt=""
class="rounded-full w-10 h-10 ring-2 ring-gray-50"
/>
</div>
</div>
</nav>
<!-- left nav bar -->
<div class="fixed w-1/5 bg-white h-screen shadow-sm top-0 mt-[72px]">
<div class="px-10 pt-20">
<h1 class="pb-5">Dashboards</h1>
<ul class="space-y-1 list-inside">
<li>Overview</li>
<li>Next Section</li>
<li>Next Section</li>
</ul>
</div>
</div>
<div id="dashboard-content" class="w-full bg-myBgGrey inline-block h-[1500px] pl-[20%] z-100">
<div id="sub-menu" class="relative top-0 bg-gray-500 w-full h-10"></div>
</div>
</body>
I have the following problem with Tailwind CSS and the truncate helper.
The code for the following image:
<div class="w-full flex items-center flex-wrap gap-y-2">
<!-- The problem is here. This is correctly cut if longer than max-w-xs, -->
<!-- but the shortest words get cut even tho they have space to grow. -->
<h1 class="mr-auto max-w-xs truncate font-semibold text-2xl text-gray-800 leading-tight md:mr-6">
Audience
</h1>
<!-- Middle nav div -->
<div class="mr-auto">
... nav here
</div>
<!-- Right side buttons -->
<div class="flex flex-wrap">
... buttons
</div>
</div>
Removing the flex class from the parent fixes the truncate issue, but I obviously need the flex to put the 3 elements inline and wrap in smaller screens.
Any ideas? Thanks!
I tested this on my system and the Audience doesn't get truncated. Maybe you have a flex or grid above this one that's effecting it?
<div class="w-full flex items-center flex-wrap gap-y-2">
<h1 class="mr-auto max-w-xs truncate font-semibold text-2xl text-gray-800 leading-tight md:mr-6">Audience</h1>
<div class="mr-auto">... nav here</div>
<div class="flex flex-wrap">... buttons</div>
</div>
I want to do this:
But my image stay in right side of div, like that:
Soo I don't know why it's happening, that's my code:
<div class="flex h-full justify-center items-center">
<div>
<h2 class="font-bold text-2xl text-gray-700">Page Not Found 🕵🏻♀️</h2>
<h3 class="mt-3 text-gray-500">Oops! 😖 The requested URL was not found on this server.</h3>
<div class="lg:grid justify-center mt-4">
<BreezeButton
class="
inline-table
w-full
items-center
bg-purple-600
text-white text-xs
font-bold
hover:bg-purple-600 hover:shadow-purple
mt-3
"
:href="route('dashboard')"
>
Back to home
</BreezeButton>
</div>
</div>
<div>
<img src="../../Assets/Img/error404.svg" alt="" />
</div>
</div>
You flexed the wrapper div so it seems to have placed the items in a row by default. Use "flex-col" alongside that in order to place your items in a column.
As #xavi3r mentioned you need to use flex-col, as a reminder, Tailwind uses a mobile-first breakpoint, so you need to set one of the breakpoints to change it to row for large devices as follows lg:flex-row or any other breakpoint!!
I am struggling with the execution of the following idea and would be really glad to get support:
I have created this article preview section which looks great on small screen (mobile) devices:
<section class="w-full md:w-2/3 flex flex-col items-center px-3">
<article class="w-full flex flex-col shadow my-4">
<div class="bg-white flex flex-col justify-start p-6">
<div class="max-w"><a
href="#>"
class="text-blue-700 hover:text-blue-500 text-sm font-bold uppercase pb-4">#Tag #Tagg #TAGGG</a>
</div>
<a href="#"
class="text-3xl font-bold hover:text-gray-700 pb-4">Article title</a>
<p href="#" class="text-sm pb-3">By author, published at 12.03.2021
</p>
<div class="aspect-w-16 aspect-h-9">
<a href="#">
<img src="https://images.unsplash.com/photo-1614730321146-b6fa6a46bcb4?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxMTc3M3wwfDF8c2VhcmNofDIzfHxlYXJ0aHxlbnwwfHx8fDE2Mjc1NTc2ODI&ixlib=rb-1.2.1&q=80&w=2000">
</a>
</div>
<a href="#"
class="pb-6 prose max-w-none">Here comes a teaser or an excerpt of the article text...</a>
<div><a href="#"
class="uppercase hover:font-bold text-gray-700 hover:text-black"><mark>Read more… <i
class="fas icon-arrow-right"></i></mark></a></div>
</div>
</article>
</section>
Now I want to change the layout on bigger screens (md: = #media (min-width: 768px) &) to this one:
Sadly my knowledge is too limited to achieve my idea. What needs to be added/changed to achieve it?
Link to the Playground
The simplest method to achieve this would be having 2 images and hiding 1 of them based on the screensize.
So on big screens you would hide the left aligned image with these classes:
hidden md:block
md:block overwrites hidden.
And the inline image gets hidden on big screens:
md:hidden
I made you a playground (also cleaned up unneccesary classes and tags a bit)
I left aligned the image with grid and grid-cols. There definitely are other methods to do this.
I have a navbar on my site, when the site is on mobile size I want to have my hamburger menu overlap the contents of my page.
This is my site :
<!-- logo Start -->
<div class="nav-logo">
<h1>My site</h1>
</div>
<!-- links Start -->
<div
class=
"
w-full
flex
flex-col
items-center
text-5xl
md:pr-20
"
>
<a href="#"
class="block md:inline-block">Work</a>
<a href="#"
class="block md:inline-block">About</a>
<a href="#"
class="block md:inline-block">Contact</a>
<div/>
<!-- links End -->
</nav>
<main>
<article>
<h1>Hello<h1/>
</article>
<main/>
I tried adding relative and z-10 both on my nav-links and nav but they dont work, they still push the content downwards instead of having that div overlap.
Any suggestions on what to do?
You'll have to work with relative absolute and z-index to make this work.
Logic:
Have parent relative having z-index value less than the child absolute div which will be used for navbar.
Output in large device:
Output in smaller device:
Code:
<div class="md:bg-yellow-400 h-screen relative z-0 flex bg-gray-500">
<div class="invisible md:visible bg-blue-400 w-1/3">
<div class="flex h-full items-center justify-center text-4xl">
Desktop Navbar
</div>
</div>
<div class="text-4xl">
The main content of the file and it has it's content all over the page
and i want to build a navbar on top of this
</div>
<div
class="absolute inset-y-0 left-0 z-10 bg-green-400 w-1/3 md:invisible"
>
<div class="flex h-full items-center justify-center text-4xl">
Mobile Navbar
</div>
</div>
</div>
Further more you can use this tailwind play link
Refer this for responsive sidebar with / without hamburger menu