Screenshot https://imgur.com/a/eFzmIAl
Hello Developers please help me to remove that spaces in the right side image gap in the top
side of image how to reduce it, i searched alot and tested few method but not pass
please guide. I am new to this Tailwindcss. Thanks for the support.
See Image Screenshot
Please check screenshot
https://imgur.com/a/eFzmIAl
<body>
<!-- Navigation Menu -->
<nav class="relative contain bg-slate-900 mx-auto p-4">
<!-- Flex Container -->
<div class="flex items-center justify-between">
<!-- Logo -->
<div class="pt-2 mx-auto">
<img src="img/logo.svg" alt="FIVERACK">
</div>
<!-- Menu Items -->
<div class="hidden space-x-5 text-yellow-200 mx-auto md:flex">
<a class="font-normal hover:font-bold" href="#">Pricing</a>
<a class="font-normal hover:font-medium" href="#">Products</a>
About
Careers
Community
</div>
<!-- Button Right Side -->
Get Started
</div>
</nav>
<!-- Hero Section -->
<section id="hero">
<!-- Flex Container -->
<div class="container flex flex-col-reverse md:flex-row items-center px-6 mx-auto mt-10 space-y-0 md:space-y-0">
<!-- Left Item -->
<div class="flex flex-col mb-32 space-y-12 md:w-1/2">
<h1 class=""></h1>
<h1 class="max-w-md text-4xl font-bold text-center md:text-5xl md:text-left">
Bring Everyone Together To Build Better Products
</h1>
<p class="max-w-sm text-enter text-darkGrayishBlue md:text-left">
Manage makes it simple for software teams to plan day-to-day tasks while keeping the
larger team goals in view.
</p>
<div class="flex justify-center md:justify-start">
Get Started
</div>
</div>
<!-- Image -->
<div class="md:w-1/2">
<img src="img/tech_stack.png">
</div>
</div>
</section>
</body>```
[1]: https://i.stack.imgur.com/OIgkL.png
[2]: https://i.stack.imgur.com/sLYP2.png
Change items-center to items-start in Flex container div
Change this :
<!-- Flex Container -->
<div class="container mx-auto mt-10 flex flex-col-reverse items-center space-y-0 bg-blue-400 px-6 md:flex-row md:space-y-0">
to
<!-- Flex Container -->
<div class="container mx-auto mt-10 flex flex-col-reverse items-start space-y-0 bg-blue-400 px-6 md:flex-row md:space-y-0">
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 section areas that I want to have equal elements. One side is just an image while the other side has content. I'm using Tailwind CSS and feel positive I have the correct classes. The section Divs are declared as Flex while the child elements each have a Flex-basis of 0 and a Flex grow of 1. The content div continues to be a little larger than my image div.
<section class="section-one flex flex-col-reverse md:flex-row-reverse">
<div class="basis-0 grow p-6 text-center md:text-left md:flex md:flex-col md:justify-center md:items-center">
<div>
<h2 class="font-fraunces text-4xl mb-4 md:text-left md:max-w-md">Stand our to the right audience</h2>
<p class="font-barlow text-gray-500 text-lg p-4 mb-6 md:max-w-md md:p-0">Using a collaborative formula of designers, researchers, photographers, videographers and copywriters, we'll build and extend your brand in digital places.</p>
<div class="flex flex-col">
Learn More
<span class="bg-rose-300/75 w-32 mx-auto h-4 rounded-full md:m-0"></span>
</div>
</div>
</div>
<div class="basis-0 grow">
<img src="images/desktop/image-stand-out.jpg" alt="" class="w-full" />
</div>
</section>
If you remove your p-6 class and add in the div below it will work.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" integrity="sha512-wnea99uKIC3TJF7v4eKk4Y+lMz2Mklv18+r4na2Gn1abDRPPOeef95xTzdwGD9e6zXJBteMIhZ1+68QC5byJZw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<section class="section-one flex flex-col-reverse md:flex-row-reverse">
<div class="basis-0 grow remove-this-p-6 text-center md:text-left md:flex md:flex-col md:justify-center md:items-center">
<div class="p-6"> <!-- add here your padding -->
<h2 class="font-fraunces text-4xl mb-4 md:text-left md:max-w-md">Stand our to the right audience</h2>
<p class="font-barlow text-gray-500 text-lg p-4 mb-6 md:max-w-md md:p-0">Using a collaborative formula of designers, researchers, photographers, videographers and copywriters, we'll build and extend your brand in digital places.</p>
<div class="flex flex-col">
Learn More
<span class="bg-rose-300/75 w-32 mx-auto h-4 rounded-full md:m-0"></span>
</div>
</div>
</div>
<div class="basis-0 grow">
<img src="https://via.placeholder.com/500" alt="" class="w-full" />
</div>
</section>
<section class="section-one flex flex-col-reverse md:flex-row-reverse ">
<div class="basis-0 grow">
<img src="https://via.placeholder.com/500" alt="" class="w-full" />
</div>
<div class="basis-0 grow remove-this-p-6 text-center md:text-left md:flex md:flex-col md:justify-center md:items-center">
<div class="p-6"><!-- add here your pading -->
<h2 class="font-fraunces text-4xl mb-4 md:text-left md:max-w-md">Stand our to the right audience</h2>
<p class="font-barlow text-gray-500 text-lg p-4 mb-6 md:max-w-md md:p-0">Using a collaborative formula of designers, researchers, photographers, videographers and copywriters, we'll build and extend your brand in digital places.</p>
<div class="flex flex-col">
Learn More
<span class="bg-rose-300/75 w-32 mx-auto h-4 rounded-full md:m-0"></span>
</div>
</div>
</div>
</section>
By using grid you can achieve this
Here is the best explanation how to use grid system in tailwindcss
I have made code for you please check here: https://play.tailwindcss.com/wldkQ1txrU
Just trying to use h-40 class but not working
<div class="flex min-h-screen bg-cover max-w-screen-3xl" style="background-image: url(https://upload.wikimedia.org/wikipedia/commons/8/88/Harlingen._Sint-Micha%C3%ABlkerk._Hoofdaltaar._HDR._12-07-2021._%28d.j.b%29_02.jpg);">
<!-- wrapper App-->
<div class="bg-slate-700/60 absolute flex flex-row inset-0 m-5 rounded-xl max-w-screen-2xl">
<!-- Left menu section -->
<div class="bg-zinc-800/90 p-5 w-16 rounded-tl-xl rounded-bl-xl"></div>
<!-- Wrapper Main -->
<div class="flex flex-col w-full overflow-auto">
<!-- Top section -->
<div class="bg-red-400/90 h-40 w-auto rounded-tr-xl p-5 sticky top-0"></div>
<!-- wrapper body -->
<div class="flex flex-col md:flex-row">
<!-- body -->
<div class="bg-green-400/90 border-2 w-full h-60 p-5"></div>
<div class="bg-green-400/90 border-2 w-full h-96 p-5"></div>
</div>
</div>
</div>
</div>
https://play.tailwindcss.com/gryfZM2drD
I just need to add class shrink-0 :-)
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
I'm trying to achieve the following layout in Tailwind CSS for a dashboard.
The initial height will be the screen size and should never exceed the initial height.
The blue area of the dashboard is going to be empty initially (but it should occupy the whole area even when empty) and it will start adding information that eventually will outgrow the designated blue area and when that happens I would like that area to overflow in Y-axis with a scrollbar. My problem is that when the overflow happens the whole page overflows not just the blue section making that column going under the limits of the screen.
I created a CodePen with the HTML code that I currently have.
<div class="h-screen bg-black flex flex-col">
<div class="bg-green-200">NAVBAR</div>
<div class="bg-blue-200 flex-1">
<div class="flex h-full">
<!-- LEFT -->
<div class="flex-1 bg-yellow-200">
<div class="flex flex-col h-full">
<div class="flex-1 bg-blue-800 text-white text-2xl p-8">
This is the only area that will be growing
and should eventually overflow displaying
scrollbars only in the blue area.
What I'm having problem with is to initially
use all the available blue space and then when
the content overflows not making the whole page
scrolldown, only this blue section.
<!-- DIVS HERE SHOULD GROW AND OVERFLOW -->
<!-- Uncommenting the following statements will
show what is my current problem -->
<!-- <div class="mb-32">.</div> -->
<!-- <div class="mb-32">.</div> -->
<!-- <div class="mb-32">.</div> -->
<!-- <div class="mb-32">.</div> -->
<!-- <div class="mb-32">.</div> -->
<!-- <div class="mb-32">.</div> -->
<!-- <div class="mb-32">.</div> -->
<!-- <div class="mb-32">.</div> -->
</div>
<div class="flex-none bg-red-200 h-32">
This will always be fixed height
</div>
<div class="flex-none bg-red-300 h-20">
This will always be fixed height
</div>
</div>
</div>
<!-- //LEFT -->
<div class="flex-1 bg-yellow-300">MIDDLE</div>
<div class="flex-1 bg-yellow-400">RIGHT</div>
</div>
</div>
<div class="bg-green-200">
The Footer should always be visible
</div>
</div>
Any help will be really appreciated
I eventually managed to accomplish what I wanted and I'm sharing the code here, it seems I was misusing the overflow properties. With this the section can grow while the rest of the sections remain flexible but fixed.
<div class="h-screen bg-black flex flex-col">
<div class="bg-green-200">NAVBAR WORKING</div>
<div class="bg-black flex flex-col h-full overflow-y-auto">
<!-- THREE COLUMNS LAYOUT -->
<div class="flex h-full">
<!-- COLUMN ONE -->
<div class="flex-1 flex flex-col bg-white">
<div class="flex flex-col bg-red-500 h-full">
<div class="bg-white h-full flex-grow-0 overflow-y-auto">
<div class="flex flex-col">
<div class="h-48 bg-black"></div>
<div class="h-48 bg-red-700"></div>
<div class="h-48 bg-black"></div>
<div class="h-48 bg-red-700"></div>
<div class="h-48 bg-black"></div>
<div class="h-48 bg-red-700"></div>
<div class="h-48 bg-black"></div>
<div class="h-48 bg-red-700"></div>
</div>
</div>
<div class="bg-red-200 h-32 flex-none">
This will always be fixed height
</div>
<div class="bg-red-300 h-20 flex-none">
This will always be fixed height
</div>
</div>
</div>
<!-- COLUMN ONE -->
<!-- COLUMN TWO -->
<div class="flex-1 bg-yellow-300">MIDDLE</div>
<!-- COLUMN TWO -->
</div>
<!-- THREE COLUMNS LAYOUT -->
</div>
<div class="bg-green-200">
The Footer should always be visible
</div>
</div>