I am trying to create a homepage that has two columns, one with text and another with a carousel of images.On web view, the layout looks great, but on mobile view, the images are compressed leaving a lot of space around. I have tried setting the image height to full with h-full which doesn't work. How can i make the image occupy the full grid height on mobile view as well? Any recommendations / references will be appreciated.
My code :
<section className="p-9">
<div className="min-h-screen grid grid-cols-1 sm:grid-cols-2 md:grid-cols-8 lg:grid-cols-8 items-center pt-9">
<div className="col-span-2">
<p className="font-bold text-4xl mb-4 ml-4">
A construction <span className="text-red-600">ecosystem</span> that is
simple, transparent and <span className="text-red-600">efficient</span>
</p>
</div>
{/* <div className="h-full col-span-6">
<img className="w-full h-full m-2" src={carousel1} />
</div> */}
<div
id="carouselExampleCrossfade"
className="absolute carousel slide carousel-fade carousel-dark relative col-span-6 m-2"
data-bs-ride="carousel"
>
<div className="carousel-inner relative w-full h-full overflow-hidden">
<div className="carousel-item active float-left w-full bg-no-repeat bg-cover">
<img
src="https://www.shell.com/business-customers/construction-and-road/about-construction-and-road/_jcr_content/pagePromo/image.img.960.jpeg/1652883928742/two-engineers-working-on-a-construction-site.jpeg"
className="block w-full h-full rounded"
alt="Wild Landscape"
/>
<Link
href={`/service`}
className="absolute bottom-0 left-0 m-6 py-2.5 px-2.5 bg-red-600 text-white font-medium text-md leading-tight rounded hover:text-red-700 hover:bg-gray-100 focus:bg-none focus:outline-none focus:ring-0 active:bg-gray-200 transition duration-150 ease-in-out"
>
<span>{"Testing"}</span>
</Link>
</div>
</div>
</div>
</div>
</section>;
Link to code here
Current view on mobile:
Current view on web:
Related
I'm making a blog using NextJS and TailwindCSS. I've made a card, that the button overlays the card image right in the middle. But the button stays a little higher. Image:
And here is the code:
<div className="relative max-w-5xl mx-auto px-2 grid grid-cols-3">
<div className="relative overflow-hidden flex items-center justify-center flex-col">
<Image
src={
"https://static.wixstatic.com/media/5bfb6f_9f2519d5fc2d41f990a10dd92eb8658d.jpg/v1/fill/w_393,h_325,al_c,q_80,usm_0.66_1.00_0.01,enc_auto/5bfb6f_9f2519d5fc2d41f990a10dd92eb8658d.jpg"
}
width={314}
height={314}
alt="Image"
className="object-cover"
/>
<div className="absolute w-full h-full top-0 bottom-0 left-0 right-0">
<button className="text-xl px-4 py-2 rounded text-blue-600 bg-white absolute bottom-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">Travel</button>
</div>
</div>
</div>
I've tried using absolute and relative positions. I've also tried using flexbox. But nothing worked. I'm expecting that the button will overlay on the image right on the center.
There are many ways to do this, but I think the easiest fix here is, instead of using absolute for the button, just add flex items-center justify-center to the parent class of button like this:
<div class="relative max-w-5xl mx-auto px-2 grid grid-cols-3">
<div class="relative overflow-hidden flex items-center justify-center flex-col">
<img
src="https://via.placeholder.com/314x314"
width="314"
height="314"
alt="Image"
class="object-cover"
/>
<div class="absolute w-full h-full top-0 bottom-0 left-0 right-0 flex items-center justify-center">
<button class="text-xl px-4 py-2 rounded text-blue-600 bg-white">Travel</button>
</div>
</div>
</div>
<script src="https://cdn.tailwindcss.com"></script>
I have a problem. I use react and tailwind css. Th modal is relative and the overlay is flex positioned, because I want the main modal to be positioned in the middle of the screen on X axis. Here it comes the problem. The wrapper that contains the options tag renders in a different place than the parent select. I tried fixing it with absolute position and also with relative one. But nothing works...
Because there is not programming logic, I will paste the code.
<div className="modal flex fade fixed top-0 left-0 w-full h-full outline-none overflow-x-hidden overflow-y-auto" id="exampleModalCenteredScrollable" tabIndex="-1" aria-labelledby="exampleModalCenteredScrollable" aria-modal="true" role="dialog">
<div className=" modal-dialog modal-dialog-centered modal-dialog-scrollable relative w-auto pointer-events-none flex-1 p-2 bg-slate-200">
<div className="modal-content border-none shadow-lg relative flex flex-col w-full pointer-events-auto bg-white bg-clip-padding max-w-2xl mx-auto mt-5 rounded-md outline-none text-current">
<div className="modal-header flex flex-shrink-0 items-center justify-between p-4 border-b border-gray-200 rounded-t-md ">
<h5 className="text-2xl font-bold leading-normal text-gray-700 underline " id="exampleModalCenteredScrollableLabel">
Add new exercice
</h5>
<button type="button" onClick={() => setOpen(!open)}
className="btn-close box-content p-1 text-black border-none rounded-none opacity-50 focus:shadow-none focus:outline-none focus:opacity-100 hover:text-black hover:opacity-75 hover:no-underline"
data-bs-dismiss="modal" aria-label="Close"><AiOutlineCloseCircle color='black' size={30}/></button>
</div>
<div className="modal-body relative p-4">
<p>Look for the exercice you wish to add, and click import. You may add as many exercices you want, however please make sure you will complete them by the end of the day.</p>
<form >
<div className='flex mt-3 flex-col'>
<input required placeholder='Search by word...' className='border border-slate-400 p-1 rounded-md flex-1 max-w-sm my-2'/>
{/* Problem is here!!!! */}
<select className='border border-slate-400 p-1 rounded-md max-w-sm my-2 [&>option]:bg-black'>
<option defaultValue>Slobozel</option>
<option>Slobozel</option>
<option>Slobozel</option>
<option>Slobozel</option>
</select>
</div>
Either svelte or tailwind transitions.
This is basically copied from the tailwind components page with some changes to make it work as best as I knew how with svelte. The tailwind component page says it requires JS, but I cannot find any examples of the kind of JS that would be expected in order for it to work the way it does on the component page.
There's a comment block of tailwind classes, but I cannot find docs on how they are to be used.
The side panel works, as in it hides and shows and all the clicks are appropriate, but it snaps. I'd like it to slide in from the side.
How do I make it do a sliding anim/transition?
<aside
class="relative z-10 "
aria-labelledby="slide-over-title"
role="dialog"
aria-modal="true"
class:block={showSidePanel} << my toggle variable in Svelte
class:hidden={!showSidePanel}
on:click|stopPropagation|preventDefault={toggleSidePanel}
transition:fly={{ x: 200, duration: 300 }}
>
<!--
Background backdrop, show/hide based on slide-over state.
Entering: "ease-in-out duration-500"
From: "opacity-0"
To: "opacity-100"
Leaving: "ease-in-out duration-500"
From: "opacity-100"
To: "opacity-0"
-->
<div
class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"
class:block={showSidePanel}
class:hidden={!showSidePanel}
/>
<div class="fixed inset-0 overflow-hidden">
<div class="absolute inset-0 overflow-hidden">
<div class="absolute inset-y-0 right-0 mt-20 flex max-w-full pl-10">
<!--
Slide-over panel, show/hide based on slide-over state.
Entering: "transform transition ease-in-out duration-500 sm:duration-700"
From: "translate-x-full"
To: "translate-x-0"
Leaving: "transform transition ease-in-out duration-500 sm:duration-700"
From: "translate-x-0"
To: "translate-x-full"
-->
<div
class="my-auto h-full w-screen max-w-2xl"
on:click|stopPropagation|preventDefault={() => {
// this blocks clicks closing the sidepanel
}}
>
<div
class="m-auto flex h-[95%] flex-col overflow-y-scroll bg-white py-6 shadow-xl"
>
<div class="px-4 sm:px-6">
<div class="flex items-start justify-between">
<h2
class="text-lg font-medium text-gray-900"
id="slide-over-title"
>
Panel title
</h2>
<div class="ml-3 flex h-7 items-center">
<button
type="button"
class="rounded-md bg-white font-bold text-gray-400 hover:text-gray-500"
on:click|stopPropagation={toggleSidePanel}
>
<span class="sr-only">Close panel</span>
<Icon src={X} theme="solid" class="h-8 w-8 font-bold" />
</button>
</div>
</div>
</div>
<div class="relative mt-6 flex-1 px-4 sm:px-6">
<!-- Replace with your content -->
<div class="absolute inset-0 px-4 sm:px-6">
<div
class="h-full border-2 border-dashed border-gray-200"
aria-hidden="true"
/>
</div>
<!-- /End replace -->
</div>
</div>
</div>
</div>
</div>
</div>
</aside>
Instead of using classes to hide or show your sidebar you should use an {#if} block wrapped around the entire aside element to hide and show the sidebar and overlay.
Then you can use the Svelte transition that is right for each element. In the Tailwind comments it's using translate-x-full for the panel transition to get a similar effect you can bind the clientWidth of the actual panel to a variable and use that as the x amount in your Svelte fly transition.
Something like this (I removed some of your code since you had no components linked and used Tailwind CDN so the Tailwind classes would work like in this REPL):
<script>
import { fly, fade } from 'svelte/transition'
let showSidePanel, width
function toggleSidePanel() {
showSidePanel = !showSidePanel
}
</script>
<svelte:head>
<script src="https://cdn.tailwindcss.com"></script>
</svelte:head>
<div>
<button class="p-3" on:click={toggleSidePanel}>
Show side panel
</button>
</div>
{#if showSidePanel}
<aside class="relative z-10">
<div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" transition:fade/>
<div class="fixed inset-0 overflow-hidden">
<div class="absolute inset-0 overflow-hidden">
<div class="absolute inset-y-0 right-0 mt-20 flex max-w-full pl-10">
<div class="my-auto h-full w-screen max-w-2xl">
<div bind:clientWidth={width} transition:fly={{ x: width }} class="m-auto flex h-[95%] flex-col overflow-y-scroll bg-white py-6 shadow-xl">
<div class="px-4 sm:px-6">
<div class="flex items-start justify-between">
<h2 class="text-lg font-medium text-gray-900">
Panel title
</h2>
<div class="ml-3 flex h-7 items-center">
<button class="rounded-md bg-white font-bold text-gray-400 hover:text-gray-500" on:click={toggleSidePanel}>
close
</button>
</div>
</div>
</div>
<div class="relative mt-6 flex-1 px-4 sm:px-6">
<div class="absolute inset-0 px-4 sm:px-6">
<div class="h-full border-2 border-dashed border-gray-200" aria-hidden="true">Some content</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</aside>
{/if}
I have this div that's supposed to represent a button next to an input. Ideally on resolution change, the input element's width shrinks but the button stays the same height and width.
<div className="flex flex-row rounded-lg border border-white border-solid hover:cursor-pointer py-2 px-2 w-28">
<AddIcon></AddIcon>
<div className="flex font-sans text-base font-medium">Add site</div>
</div>
I set the w-28 property thinking it could achieve this. However, the button changes width if I shrink the window or screen it appears on, and I'm not sure why.
This is the full component:
<div id="settings" className="w-3/4 h-5/6 bg-blue-300 self-center">
<div id="settings-content" className="flex flex-col self-center mx-5">
<div id="header" className="flex flex-col mt-5">
<div id="title" className="font-sans font-bold text-3xl">Block Sites</div>
</div>
<div id="subtitle" className="font-sans text-base font-medium text-neutral-600">Visiting these sites will stop point acquisition until you reset the timer</div>
<div id="block-site-add-list" className="flex flex-row mt-16 justify-between bg-amber-400 shrink-0">
<div className="flex flex-row rounded-lg border border-white border-solid hover:cursor-pointer py-2 px-2 w-28">
<AddIcon></AddIcon>
<div className="flex font-sans text-base font-medium">Add site</div>
</div>
<input className="ml-5 flex-grow bg-red-500"></input>
</div>
</div>
</div>
This is what the button looks like with a smaller screen, when both words should be on the same line:
You could try adding whitespace-nowrap to your label div to ensure that the text doesn't wrap to two lines. Since you have your elements (button and input) wrapped in another flex, you can add shrink-0 to your wrapper div to keep its size.
For example:
<div id="block-site-add-list" className="flex flex-row ...">
<div className="shrink-0 flex flex-row ...">
<AddIcon></AddIcon>
<div className="whitespace-nowrap font-sans text-base font-medium">Add site</div>
</div>
<input className="ml-5 grow bg-red-500"></input>
</div>
How do I get the second inner div to be on top of the first inner div (map)? I can't figure this out, despite using relative & absolute positioning. I'm using React & Tailwind CSS. Instead, the second inner div currently follows the flow of the image and is positioned below the first children div.
<div className="relative w-full h-screen">
<div className="bg-green-400 w-full h-full z-0">
<p className="italic text-bold bd-red-100 font-serif">Map</p>
</div>
<div className="absolute z-50">
<p className="text-2xl font-bold">This should be on top of the map</p>
</div>
</div>
Here's a Tailwind Play Code I created based on your query. I have tweaked height and width for proper visual.
<div class="w-full h-screen bg-gray-200 flex justify-center items-center">
<div class="bg-gray-400 w-96 h-96 relative z-0">
<p class="italic text-bold bd-red-100 font-serif">Map</p>
<div class="absolute inset-0 flex justify-center items-center z-10">
<p class="text-2xl font-bold">This should be on top of the map</p>
</div>
</div>
</div>
I would like to extend #Digvijay's answer further more to provide extended explanation, which consists
1. Logic
2. Responsive Sidebar
3. Responsive Sidebar with hamburger menu
You'll have to work with relative absolute and z-index to make this work.
1. Logic:
Have parent relative having z-index value less than the child absolute div which will be used for navbar.
Code:
<div class="h-screen relative z-0 flex bg-gray-500">
<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">
<div class="flex h-full items-center justify-center text-4xl">
Mobile Navbar
</div>
</div>
</div>
Output:
Code Link: tailwind play
2. Responsive Sidebar
If you are aiming to build responsive sidebar which overlaps only on the mobile screen but would be normal div in the large screen then follow the below code.
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>
Code link : tailwind play
Output in large device:
Output in smaller device:
3. Toggle mobile navbar using hamburger menu
Output on large devices
Output in small device with hamburger menu
When clicked on hamburger menu
Code:
<body>
<div class="bg-yellow-400 h-screen relative z-0 flex">
<div class="hidden md:block 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 pl-24 md:p-0 main_content">
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="mobile_navbar absolute inset-y-0 left-0 z-10 bg-green-400 w-1/3 hidden md:hidden"
>
<div class="flex h-full items-center justify-center text-4xl">
Mobile Navbar
</div>
</div>
<div
class="md:hidden space-y-2 absolute hamburger_menu inset-y-0 left-0 p-4"
>
<span class="block w-8 h-1 bg-white"></span>
<span class="block w-8 h-1 bg-white"></span>
<span class="block w-8 h-1 bg-white"></span>
</div>
</div>
<script type="text/javascript">
document
.querySelector(".hamburger_menu")
.addEventListener("click", () => {
console.log("Hello");
document.querySelector(".mobile_navbar").classList.toggle("hidden");
});
document.querySelector(".main_content").addEventListener("click", () => {
console.log("Touch me");
console.log(
document
.querySelector(".mobile_navbar")
.classList.contains("hidden") == false &&
document.querySelector(".mobile_navbar").classList.toggle("hidden")
);
});
</script>
</body>