Hey I am using tailwind css to complete my website. My navbar doesn't gives me full screen view in phone screen. Please help!!!
ScreenShot of bug Click here
You can check original site hosted on github - Website Link
HTML and Tailwind-CSS :
<nav class="flex justify-between bg-blue-500 w-full">
<div class="ncrt-sol mx-48 my-6">
<span class="text-white font-bold text-xl cursor-default">NCERT Solutions</span>
</div>
<div class="links">
<ul class="flex mx-40 my-6">
<li>Home</li>
<li>Solutions</li>
<li>Contact</li>
</ul>
</div>
</nav>
I tried width-full by using w-full class but it is still not working...
Try with class w-screen which will compile to 100%vw
Edit:
The margin of classes ncrt-sol and flex class is too high for mobile devices.
So this is causing the trouble . So instead of mx-40 change it to mx-4
So the final code is :
<nav class="flex justify-between bg-blue-500 w-full">
<div class="ncrt-sol mx-4 my-6">
<span class="text-white font-bold text-xl cursor-default">NCERT Solutions</span>
</div>
<div class="links">
<ul class="flex mx-4 my-6">
<li>Home</li>
<li>Solutions</li>
<li>Contact</li>
</ul>
</div>
</nav>
And change the margin likewise and use breakpoints for larger screen like md: lg: and the like.
Hope it helps!
The margin left and right of the .ncrt-sol div and .links div are too big for mobile screen and causing it to overflow the body element. Try to use a smaller value for mobile devices.
Related
I am trying to make just a simple CV page, using Nuxt, Vue3 and TailwindCSS. When my browser is full-screen, everything looks fine, and it all fits in well. However, if I got anything outside of full-screen, there is a margin for no explicable reason on the right-side of the page in my main body part of the application. (Please overlook the horrible design, it's still in progress)
As displayed below, there is a margin on the right side of the element, but shouldn't be and its not showing in the computed layout even. I have no custom CSS added, so I am only using the default Tailwind-supplied classes, as far as I can tell, there should be no right-side margin.
This is the parent element, which as you can see has no padding or margins that would affect the child.
Here is my default.vue, where the "content" elements are inserted (in the <slot /> tag)
<template>
<div class="container flex p-4 flex-col h-screen overflow-hidden bg-slate-200">
<div class="pb-2 bg-gradient-to-r from-red-500 via-green-500 to-purple-500">
<header class="bg-slate-200 pb-2">
<nav>
<ul class="flex justify-end gap-5">
<NuxtLink to="skills" class="rounded-lg border-black border-solid border-2
p-3">
<li>Key Skills & Interests
</li>
</NuxtLink>
<NuxtLink to="education" class="rounded-lg border-black border-solid
border-2 p-3">
<li>Education</li>
</NuxtLink>
<NuxtLink to="experience" class="rounded-lg border-black border-solid
border-2 p-3">
<li>Experience</li>
</NuxtLink>
<NuxtLink to="about" class="rounded-lg border-black border-solid
border-2 p-3">
<li>A Little Bit About Me</li>
</NuxtLink>
</ul>
</nav>
</header>
</div>
<slot />
</div>
</template>
Container class in tailwind doesn't apply any horizontal padding or self-center automatically. Adding mx-auto class (which sets margin-left and margin-right to auto) to the first div will solve the problem.
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'm using tailwindcss. I have a flexbox container and a login button inside it.
The button looks like it's being stretched.
<nav font-am class="m-6 text-xl">
<div class="flex flex-row justify-between container">
<div>
<img src="./img/Logo.png">
</div>
<div class="flex flex-row">
<img src="./img/AccountLog.png">
<p class="hidden md:flex">My Account</p>
</div>
<div class="flex flex-row">
<img src="./img/love_symbol.png">
<p class="hidden md:flex">My List</p>
</div>
<div class="flex box-border flex-row">
<img src="./img/LockLogo.png">
<button class="bg-darkPink hover:underline text-white font-bold py-2 px-4 rounded-full" role="button">Sign In</button>
</div>
</div>
</nav>
Here is how it looks with the logo:
And the button is displayed normally when I delete the logo:
What should I do to keep the button looks normal when the logo is on. Is the logo taking up too much space or something?
You've set your button as a stretched flex element in a flex row. You can do one of several things to fix it:
Align the row elements to center rather than stretching them. Here, '.self-center` seems to work nicely, though you could do it at the row level also.
Wrap the button in a div. This will make the div the stretched element, and you'll need to center the button vertically with other styles.
Both solutions are shown here.
.bg-darkPink {
background: pink;
}
<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"
/>
<nav font-am class="m-6 text-xl">
<div class="flex flex-row justify-between container">
<div class="flex box-border flex-row">
<img src="https://via.placeholder.com/80">
<button class="bg-darkPink hover:underline text-white_disabled font-bold
py-2 px-4 rounded-full self-center">Flex class</button>
</div>
<div class="flex box-border flex-row">
<img src="https://via.placeholder.com/80">
<div class="flex flex-column items-center">
<button class="bg-darkPink hover:underline text-white_disabled font-bold
py-2 px-4 rounded-full">Flex div</button>
</div>
</div>
</div>
</nav>
You can give the div which is the parent of the link and the button the tailwind classes grow-0 and shrink-0 to prevent it from changing shape. Set items-center to align the lock icon vertically with the button.
Don't let the logo disappear with display:none, do it with opacity:0
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!