I have an image in a flexbox child. When I shrink the screen to mobile-sized on my laptop, the image size adjusts correctly. However, when I view the website on my phone, the image is stretched.
<div className="flex items-center gap-16 flex-col md:flex-row">
<div className="flex-1 flex gap-7 flex-col items-start">
... sibling content
</div>
<img src={`/image.png`} className="max-w-100 rounded-lg flex-1 overflow-auto"/>
</div>
Output when viewing mobile size on laptop:
Output when viewing on my phone:
Fixed! Image needed to be placed within a container that includes flex-wrap: wrap.
<div className="flex-wrap flex-1">
<img src={`/desktop-mockup.png`} className="max-w-100 rounded-lg flex-1"/>
</div>
Related
I'm having immense trouble understanding the concept of div height and overflow. Been searching for two days but I think I'm missing a key concept here...
My layout looks like this (Tailwind Playground):
The blue div does not scroll all the way to the end of the content. For some reason the div thinks that its height is larger than it really is (by exactly the height of the second navbar (red) on top of it). As a result, I can't scroll all the way to the bottom.
Also, having to repeat h-full for each child div until I reach the div that I want to be scrollable seems off to me but otherwise it assumes h-auto which is not good.
<div class="h-screen overflow-hidden">
<div class="flex h-full flex-col overflow-hidden">
<div class="w-full bg-slate-500 text-center text-white h-12 ">NAVBAR</div>
<div class="flex h-full overflow-hidden">
<div class="flex h-full basis-1/6">
<div class="w-full bg-gray-300 text-center text-black">Sidebar</div>
</div>
<div class="flex h-full grow flex-col bg-slate-500">
<div class="h-12 w-full shrink-0 bg-red-400 text-center">Second Navbar</div>
<div class="h-full w-full grow bg-green-400">
<div class="flex h-full">
<div class="w-1/3 bg-blue-400 text-center">
<div class="flex h-full flex-col overflow-y-scroll">
<div>
Lorem....
</div>
</div>
</div>
<div class="h-full w-2/3 overflow-y-scroll bg-orange-400 text-center">Main content</div>
</div>
</div>
</div>
</div>
</div>
</div>
Lets look at the container(blue parent) under the second navbar. Its parent (the parent of the second navbar as well) have a height of about 831px. The navbar height is 3rem - which is about 48px.
But the blue parent has a height of 100% (of its parent) ~ 831px. So its basically overflowing (because 831+48 != 831).
If you put the overflow:hidden on the blue parent it'll hide the overflowing and blue container will scroll normally.
https://play.tailwindcss.com/SOO2rwiGsw
I am quite new to Tailwind CSS and I am trying to set two images inside a banner with first image to take 1/3 of width and second image to take 2/3 of width when this image is viewed on desktop screen. In mobile I need the images to be shown in full width so user can scroll right and left to each image.
Right now my code works fine on desktop but on mobile it shows images in the same arrangement i.e. as 1/3 and 2/3 of screen width, which is not what I want. I have tried targeting md:w-1/3 and 2/3 respectively but it seems to mess up everything.
I also tried using md:grid md:grid-cols-3 in the inner div element and then set the second picture as md:col-span-2 but it did not work.
I would appreciate any guidance on what is wrong with my code. Thank you a lot in advance.
<div class="images-wrapper">
<div class="flex bg-white md:bg-transparent h-full overflow-x-auto md:overflow-x-hidden without-scrollbar gap-1 md:gap-1.5 flex-nowrap h-full w-full flex-grow md:flex-grow-0 flex-shrink-0 md:flex-shrink">
<a class="w-1/3" href="javascript:;">
<img class="object-cover aspect-video object-center min-h-[250px] md:min-h-[227px] max-h-[250px] md:min-h-[227px] md:max-h-[227px] w-full h-full md:rounded-tl-[40px]" src="http://...">
</a>
<a class="w-2/3" href="javascript:;">
<img class="object-cover aspect-video object-center min-h-[250px] md:min-h-[227px] max-h-[250px] md:min-h-[227px] md:max-h-[227px] w-full h-full md:rounded-tr-[40px]" src="http://...">
</a>
</div>
</div>
when u use tailwind css first u need to start building with phone resolution and move up ,so u can use when class="w-full md:w-1/3 lg..." class="w-full md:w-2/3 lg..."
So I figured out the issue next morning, I targeted w-1/3 for md sized screens and set min-width too. Final code looks like:
<div class="images-wrapper">
<div class="flex bg-white md:bg-transparent h-full overflow-x-auto md:overflow-x-hidden without-scrollbar gap-1 md:gap-1.5 flex-nowrap h-full w-full flex-grow md:flex-grow-0 flex-shrink-0 md:flex-shrink">
<a class="w-full md:w-1/3 min-w-full md:min-w-0" href="javascript:;">
<img class="object-cover aspect-video object-center min-h-[250px] md:min-h-[227px] max-h-[250px] md:min-h-[227px] md:max-h-[227px] w-full h-full md:rounded-tl-[40px]" src="http://...">
</a>
<a class="w-full md:w-2/3 min-w-full md:min-w-0" href="javascript:;">
<img class="object-cover aspect-video object-center min-h-[250px] md:min-h-[227px] max-h-[250px] md:min-h-[227px] md:max-h-[227px] w-full h-full md:rounded-tr-[40px]" src="http://...">
</a>
</div>
</div>
Another thing causing the problem was my browser not responding to CSS updates immediately but only after localhost restart so please make sure that your updates to CSS are rendered properly. Thanks to Zemame Youcef Oualid for the advice.
What I currently have using Tailwind (see this playground)
<div class="h-screen flex flex-col items-center space-y-6">
<div class="h-1/3">X</div>
<div class="h-1/3">X</div>
<div class="h-1/3">X</div>
</div>
What I like is that each of the 3 items take 33% (minus the y-spacing) of the h-screen container.
What happens there is that the h-screen container is larger than the height of the screen so there's a scroll, you can see that in the playground I've added.
There is a parent around that container with py-6. I initially thought that was the problem, but if I do this:
<div class="h-screen flex flex-col items-center space-y-6">
<div class="">X</div>
</div>
With that same py-6 parent around it, it works as expected and there's no scroll.
You can use other classes like flex-1 to expand your flex-child and mind margins, also flex-col on the parent holding a single child is not necessary., h-screen on the child is also not necessary, the parent is already a sized flexbox and will fill it up:
possible example :
<div class="min-h-screen bg-gray-100 py-6 flex justify-center">
<div class=" flex flex-col items-center space-y-6">
<div class="flex-1 bg-red-500">X</div>
<div class="flex-1 bg-green-500">X</div>
<div class="flex-1 bg-yellow-500">X</div>
</div>
</div>
https://play.tailwindcss.com/VCTmCjUAQA
make it 2 children, it will be 50% minus margins, four : 25% minus margins and so on. flex do the math itself ;)
I have a flexbox with 3 children items that looks something like this:
<section className="px-5 flex flex-col md:flex-row md:space-x-10 justify-around">
<div className="flex flex-col py-3 md:flex-grow"><input ... /></>
<div className="flex flex-col py-3 md:flex-grow"><input ... /></>
<div className="flex flex-col py-3 md:flex-grow"><input ... /></>
</section>
This works fine in full screen, however flex items start to break out of parent after shrinking the window width (near 1000px).
How can I make it so the items stay inside their parent?
Fullscreen
After shrinking window width
What I would like to achieve
By adding flex-wrap class in the parent(section tag in your case) will fix the issue.
Read more about flex-wrap https://tailwindcss.com/docs/flex-wrap
If you use flexbox, you can use flex wrap property to solve your proble.,
But i try to get the same result with grid
<div class="container py-10">
<section class="grid grid-cols-3 gap-4 p-5 border border-gray-400 rounded-lg">
<div class="w-full h-20 bg-orange-200 border border-orange-400 rounded-md"></div>
<div class="w-full h-20 bg-orange-200 border border-orange-400 rounded-md"></div>
<div class="w-full h-20 bg-orange-200 border border-orange-400 rounded-md"></div>
</section>
</div>
This is better i think :)
I have a card component that renders like the first image below on screen sizes above small, mobile devices I have the component set to flex-wrap. When flex-wrap is active then my image is pushed to the left of the card even though it's container is set to w-full and I have tried to center with justify-center. I am trying to centre the image only when devices are small and under. I have tried setting sm: justify-center which doesn't work. Anyone got ideas on how I can refactor to get this functionality to work? Thanks
import React from "react"
export default function FeatureCard(props) {
return (
<div className="flex flex-row flex-wrap w-2/3 h-auto bg-gray-200 p-2 rounded-lg">
<div className="flex xl:w-1/3 lg:w-1/3 md:w-1/3 sm:w-full xs:w-full">
<img src={props.image} />
</div>
<div className="flex xl:w-2/3 lg:w-2/3 md:w-2/3 sm:w-full xs:w-full text-center self-center justify-center font-bold">
<ul>
{props.features.map(feature => (
<li>{feature}</li>
))}
</ul>
</div>
</div>
)
}
<div className="flex flex-row flex-wrap w-full h-auto justify-center -py-2">
<div className="flex xl:w-1/2 lg:w-1/2 md:w-full sm:w-full xs:w-full h-auto justify-center py-2">
<FeatureCard
features={[
"Modern Website Design",
"Progressive Web Applications",
"Content Management Systems",
"JAMstack",
]}
image={"https://img.icons8.com/color/96/000000/monitor.png"}
/>
</div>
</div>
So if I understand correctly, you want the props.image centered on small screens?
What if you added something like this to the <div className="flex flex-row flex-wrap w-full h-auto justify-center -py-2"> div:
#media (max-width: 600px) {
flex-direction: column;
justify-content: center;
align-items: center;
}
What it basically does, is changing the flex direction to column instead of row when the screen is smaller than 600px, which in tailwind-css probably translates to:
sm:flex-col sm:justify-center sm:items-center