I am using the tailwind CSS footer in my NextJS project. I am displaying fetched data. The footer is floating only when there are less data. I created a footer file in my pages and imported it into my _app.js file. I tried the absolute and fixed position. But it is not working. How do I keep my footer to the bottom?
<div className="relative mt-16 bg-gray-900">
<div className="px-4 pt-12 mx-auto sm:max-w-xl md:max-w-full lg:max-w-screen-xl md:px-24 lg:px-8">
<div className="flex flex-col-reverse justify-between pt-5 pb-10 border-t lg:flex-row">
<p className="text-base text-white-100">
© Copyright 2020. All rights reserved.
</p>
<ul className="flex flex-col mb-3 space-y-2 lg:mb-0 sm:space-y-0 sm:space-x-5 sm:flex-row">
<li>
<Link href="/Privacy">
<a className="text-sm tracking-wide font-medium text-white-100 transition-colors duration-300 hover:text-indigo-400">
Privacy Policy
</a>
</Link>
</li>
<li>
<a href="https://twitter.com/" target="_blank" rel="noreferrer noopener" className="text-sm tracking-wide font-medium text-white-100 transition-colors duration-300 hover:text-indigo-400">
Contact
</a>
</li>
</ul>
</div>
</div>
</div>
You could set a minimum height based on 100vh minus the height of the footer to the main content container.
<main class="min-h-[calc(100vh-210px)]">Main Content</main>
<footer class="h-[210px] bg-gray-900">
<!-- Your footer content -->
</footer>
Try it on TailwindCSS playground.
Related
I'm trying to use SwiperJS but I have a problem with the z-index I think.
I have my menu going below the slider and I don't understand how this is happening.
I tried to put a z-index: 1000 on the menu and a z-index: 1 on the slider.
I tried to put a z-index: -1 on the slider and it works, but I lose the use of the navigation buttons...
Am I blind? I think so.
<header class="menu">
<div class="menu__logo">
<a href="/">
kappa
</a>
</div>
<div class="menu__nav">
<ul>
<li>
<a href="#">
kappa
</a>
</li>
<li>
<a href="#">
kappa
</a>
</li>
<li class="menu__nav__dropdown" x-data="{open: false}" x-on:mouseover="open = true" x-on:mouseover.away="open = false">
<span>
kappa
</span>
<x-icons.array-down />
<div class="menu__nav__dropdown__block" x-show="open" x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0 translate-y-1" x-transition:enter-end="opacity-100 translate-y-0" x-transition:leave="transition ease-in duration-150" x-transition:leave-start="opacity-100 translate-y-0" x-transition:leave-end="opacity-0 translate-y-1" #click.away="open = false" style="display: none;">
<div class="menu__nav__dropdown__block__bg">
<div class="menu__nav__dropdown__link__wrapper">
<a href="#" class="menu__nav__dropdown__link">
<p>
kappa
</p>
</a>
<a href="#" class="menu__nav__dropdown__link">
<p>
kappa
</p>
</a>
<a href="#" class="menu__nav__dropdown__link">
<p>
kappa
</p>
</a>
<a href="#" class="menu__nav__dropdown__link">
<p>
kappa
</p>
</a>
<a href="#" class="menu__nav__dropdown__link">
<p>
kappa
</p>
</a>
</div>
</div>
</div>
</li>
<li>
<a href="#">
kappa
</a>
</li>
</ul>
</div>
<div class="menu__phone">
<div class="menu__phone-icon">
<x-icons.phone />
</div>
<div class="menu__phone-number">
kappa
</div>
</div>
</header>
.menu {
#apply flex w-full justify-between py-4 sticky base;
}
.menu__logo {
#apply w-52;
}
.menu__nav ul {
#apply list-none flex gap-x-10;
}
.menu__nav {
#apply my-auto;
}
.menu__phone {
#apply flex gap-x-3;
}
.menu__phone-icon {
#apply bg-sc-orange p-2 fill-white;
}
.menu__phone-number {
#apply my-auto font-bold;
}
.menu__nav__dropdown {
#apply cursor-pointer fill-primary flex gap-x-3
}
.menu__nav__dropdown svg {
#apply my-auto
}
.menu__nav__dropdown__block {
#apply absolute left-1/2 transform -translate-x-1/2 mt-8 px-2 w-screen max-w-xs sm:px-0 z-10;
}
.menu__nav__dropdown__block__bg {
#apply shadow-lg ring-1 ring-black ring-opacity-5 z-10;
}
.menu__nav__dropdown__link__wrapper {
#apply relative grid gap-6 bg-white px-5 py-6 sm:gap-8 sm:p-8;
}
.menu__nav__dropdown__link {
#apply -m-3 p-3 block hover:bg-gray-50;
}
<div class="swiper">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide">
<img src="https://wallpapers.com/images/featured/g9rdx9uk2425fip2.jpg" class="md:min-w-full object-cover h-160 hidden md:block" width="1440" height="624" alt="slider 1" />
</div>
<div class="swiper-slide">
<img src="https://wallpapers.com/images/featured/g9rdx9uk2425fip2.jpg" class="md:min-w-full object-cover h-160 hidden md:block" width="1440" height="624" alt="slider 1" />
</div>
<div class="swiper-slide">
<img src="https://wallpapers.com/images/featured/g9rdx9uk2425fip2.jpg" class="md:min-w-full object-cover h-160 hidden md:block" width="1440" height="624" alt="slider 1" />
</div>
</div>
<!-- If we need navigation buttons -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
I would just like the menu to go in front of the slider.
Since your codes are complex, I will explain this with a simple example. I think the problem is that you haven't given the relative class to the field you want to stand out. If you are using z-index, you should also add the relative class. In the example below, you can see that if you remove the relative class from the title, the title will go to the back.If this is not enough, you should add that it is important to the classes. SwiperJS might be squashing your classes somehow.
Demo
I found the solution, I simply added the tailwind classes to the header : z-20 relative
I'm trying to create a header with the Title in the center, the logout button at the right, and a horizontal list menu at the bottom.
I'm using Tailwind CSS for styling, but the list won't become horizontal no matter what I throw at it.
import React from 'react'
function Header(props) {
return (
<section className="text-black bg-white">
{/* MAIN TEXT AND USER LOGIN/LOGOUT */}
<div className="flex items-center justify-center p-6">
<h1 className="text-6xl px-3 rounded-md shadow-lg py-1 bg-lmgray">
NEW STREET JOURNAL
</h1>
<div className="absolute right-20 mt-2 px-5 rounded-md shadow-lg py-1 bg-lmgray" >
<p>{props.name}</p>
<button className="border-2 border-solid border-black rounded-md ">Logout</button>
</div>
</div>
{/* NAVBAR */}
<div className="">
<ul>
<li>
Home
</li>
<li>
World
</li>
<li>
India
</li>
<li>
Politics
</li>
<li>
Economy
</li>
<li>
Markets
</li>
<li>
Opinion
</li>
<li>
Real Estate
</li>
</ul>
</div>
</section>
)
}
Header.defaultProps={
title: 'News Feed'
}
export default Header
Where am I going wrong?
Try applying inline display to all the list items, for example:
<li className="inline">
Home
</li>
Alternatively, you can use divs instead of unordered lists, and use flexbox in the parent div as such:
<div className="flex">
<div>
Home
</div>
<div>
World
</div>
<div>
India
</div>
<div>
Politics
</div>
<div>
Economy
</div>
<div>
Markets
</div>
<div>
Opinion
</div>
<div>
Real Estate
</div>
</div>
The second method might be better as it allows you to control the styling from one parent div rather than having to change it for each child.
I am using Flex in tailwind in one my main div container to align the items inside of it horizontal
but somehow the items are of different sizes in the row the image link is below any fixes for it?
i have tried using height utility class but it just messes up the entire page.
[1]: https://i.stack.imgur.com/Yjs51.jpg
HOME
ORDERS
MENU CARD
FAQs
ABOUT
Butter Chicken
If you haven't tried butter chicken, you don't know what you'r missing.
</div>
</div>
</a>
<a href="butterchicken.html">
<div class="max-w-sm rounded overflow-hidden shadow-lg justify-center">
<img class= "w-full" src="images/download (1).jpg" alt="malai-chicken">
<div class="px-6 py-8">
<div class="font-extrabold text-xl pb-3">Malai Chicken</div>
<div>
<p class=" font-serif text-base mb-3">Clean as white and appetizing.</p>
</div>
</div>
</div>
</a>
</a>
<a href="butterchicken.html">
<div class="max-w-sm rounded overflow-hidden shadow-lg justify-center">
<img class= "w-full" src="images/download (2).jpg" alt="Shahi Paneer">
<div class="px-6 py-8">
<div class="font-extrabold text-xl pb-3">Shahi Paneer</div>
<div>
<p class=" font-serif text-base mb-3">First Pick of Royales.</p>
</div>
</div>
</div>
</a>
</div>
So i have been working on a project. But Clicking on Footer link hides the title portion of the id like the 2nd image . is there any way to show it like the 3rd pic . Tried adding padding top to the id element still not working. Showing this
Want to show like this
My Footer Code
<!-- Tailwind -->
<link href="https://unpkg.com/tailwindcss#^2/dist/tailwind.min.css" rel="stylesheet">
<!-- Body -->
<div class="w-full px-4 md:w-1/3">
<h2 class="mb-3 text-2xl tracking-widest title-font text-textC font-futuraB">
TOP SERVICES</h2>
<ul class="mb-10 list-none font-futuraL">
<li class="py-0.5">
Brand strategy
</li>
<li class="py-0.5">
Identity Design
</li>
<li class="py-0.5">
Marketing & Development
</li>
<li class="py-0.5">
<a rel="noopener noreferrer" href="http://ignition.brandheft.com/" class="text-textAltC hover:text-accentC">Printing Services</a>
</li>
</ul>
</div>
Div Element having the issue
<!-- Tailwind -->
<link href="https://unpkg.com/tailwindcss#^2/dist/tailwind.min.css" rel="stylesheet">
<!-- Body -->
<div class="flex flex-wrap justify-center mx-auto lg:w-4/5 service_container_1" id="strategy">
<div class="order-first object-cover object-center rounded lg:w-1/2">
<img class="w-full h-72 lg:h-auto service_img_1" src="https://via.placeholder.com/300.jpg">
</div>
<div class="w-full my-auto mb-6 text-center lg:w-1/2 lg:pr-10 lg:py-6 lg:mb-0 font-futuraM lg:text-left">
<h1 class="pt-12 mb-4 text-5xl font-medium text-textC">Brand Strategy</h1>
<p class="mb-4 text-base leading-relaxed lg:text-lg text-textAltC first-letter:text-accentC first-letter:text-xl lg:first-letter:text-2xl font-futuraL">Whether you want to be remembered by your customers, connect with your audience, or increase the prices of your products by showing them the value, you need to differentiate yourself from your competitors. Differentiating doesn't always mean providing
a totally different product or service. Differentiating means adding a little something extra that'll make a huge impact. That naturally comes from your vision but you need to mine it using a proper brand strategy. A brand strategy encompasses your
company's mission, promises to your customers, and a plan to communicate the same to your audience. Here's how we can help you draft a successful brand strategy.</p>
<div class="space-y-2">
<div class="flex flex-col justify-between space-y-2 lg:space-y-0 lg:flex-row">
<span class="text-accentC">Brand purpose</span>
<span class="text-accentC">Target audience</span>
</div>
<div class="flex flex-col justify-between space-y-2 lg:space-y-0 lg:flex-row">
<span class="text-accentC">Brand attributes</span>
<span class="text-accentC">Brand book</span>
</div>
<div class="flex flex-col justify-between space-y-2 lg:space-y-0 lg:flex-row">
<span class="text-accentC">Brand mission statement</span>
<span class="text-accentC">Brand voice</span>
</div>
<div class="flex flex-col justify-between space-y-2 lg:space-y-0 lg:flex-row">
<span class="text-accentC">Brand personality</span>
<span class="text-accentC">Brand kit</span>
</div>
</div>
<div class="flex mt-10">
Get a Quote
</div>
</div>
</div>
LIVE WEBSITE
I have a section with the following contents:
<section class="flex flex-wrap -mx-2">
<Card
v-for="(course, index) in courses"
:key="index"
:title="course.title"
:professor="course.professor"
:price="course.price"
:excerpt="course.excerpt"
:image="course.image"
:category="course.category"
/>
</section>
A Card looks like this:
<article class="bg-red mt-5 px-2 w-full md:w-1/2 lg:w-1/3 xl:w-1/3 shadow-md rounded bg-white">
<nuxt-link to="/courses/example-course">
<img :src="`/images/${image}`" :alt="title" class="rounded-t w-full">
</nuxt-link>
<div class="p-4">
<header class="flex justify-between">
<section>
<h3 class="text-gray-700">
<nuxt-link to="/courses/example-course" class="hover:text-gray-600" v-text="title"></nuxt-link>
</h3>
<p class="text-gray-600 mt-1" v-text="professor"></p>
</section>
<div v-if="price">
<span class="px-2 py-1 bg-green-200 text-green-500 font-bold rounded">${{ price }}</span>
</div>
</header>
<article class="text-gray-700 mt-2" v-text="excerpt"></article>
</div>
<footer class="border-t border-gray-300 uppercase p-5 flex justify-between">
<span class="text-gray-600 text-xs font-bold self-center" v-text="category"></span>
<a href="#" class="text-gray-600 hover:text-blue-600">
<i v-if="price" class="fa fa-user"></i>
</a>
</footer>
</article>
And the outcome of all this looks like this:
As you can see, the cards are touching each other, despite me following what the Tailwind's docs say on grid spacing. I have tried adding ml-2 on the <article> tags, but that just results in wrapping the element prematurely and leaving out too much space.
What am I doing wrong here and how to add a gap between the cards? Thanks!
The "problem" with margin is that it lives on the outside of the box(model) of your element, e.g. it affects the total width of your card. For example on large screens you want them to be 33.33% wide, but if you add margin on the left/right, the card will have a width of 33.33% + margin which makes the flexbox container wrap after two items because otherwise the total width would be more than 100%. You can solve this by a) setting things to box-sizing: border-box (doesn't help with margin tough!) and b) use padding instead of margin to create the gaps, this usually requires some kind of wrapper around your content that does nothing else than dealing with spacing and sizing, something like this:
<article class="mt-5 px-2 w-full md:w-1/2 lg:w-1/3 xl:w-1/3">
<div class="card bg-red shadow-md rounded bg-white">
<nuxt-link to="/courses/example-course">
<img :src="`/images/${image}`" :alt="title" class="rounded-t w-full">
</nuxt-link>
<div class="p-4">
<header class="flex justify-between">
<section>
<h3 class="text-gray-700">
<nuxt-link to="/courses/example-course" class="hover:text-gray-600" v-text="title"></nuxt-link>
</h3>
<p class="text-gray-600 mt-1" v-text="professor"></p>
</section>
<div v-if="price">
<span class="px-2 py-1 bg-green-200 text-green-500 font-bold rounded">${{ price }}</span>
</div>
</header>
<article class="text-gray-700 mt-2" v-text="excerpt"></article>
</div>
<footer class="border-t border-gray-300 uppercase p-5 flex justify-between">
<span class="text-gray-600 text-xs font-bold self-center" v-text="category"></span>
<a href="#" class="text-gray-600 hover:text-blue-600">
<i v-if="price" class="fa fa-user"></i>
</a>
</footer>
</div>
</article>
I know it is kind of annoying to clutter up the markup like that, but its usually worth it =).
EDIT: It is actually as the docs say
Add a negative horizontal margin like -mx-2 to your column container and an equal horizontal padding like px-2 to each column to add gutters.
your issue is with the box-shadow that then doesn't let you create a visual gap, so technically you need the wrapper because of your box-shadow!