Images shrinking instead of text
I have a div with basically three columns: text, an image and a div with two images. Right now, the div with two images is looking like the first image, they are pretty small. I want them to take up the full height (2nd image) at the cost of the width of the text. I've tried a lot of things, but still couldn't figure it out :) Thanks
<section
id="about"
class="min-h-svh flex flex-col md:flex-row items-center gap-6 px-4 sm:px-12 py-6 sm:py-7"
>
<div
class="flex flex-col justify-between items-start md:max-h-[calc(100svh-3.5rem)]"
>
<Logo />
<div class="text-orange space-y-7">
<p>
RixtMixt is a premium design label for contemporary, fresh textile
accessories. Crafted by top-tier manufacturers in Italy, every product
is held to the highest standards of quality and sustainability.
</p>
<p>
Backed by years of experience working with Europe's leading high-end
fashion producers, the RixtMixt team is passion- ate about shaping
trends and staying ahead of the curve in the ever-evolving world of
fashion.
</p>
<p>RixtMixt is powered by Little Black Buzzer.</p>
</div>
<Image
src={certificates}
alt="Certificates"
class="h-full w-auto object-contain"
/>
</div>
<div class="flex flex-col lg:flex-row gap-6 md:max-h-[calc(100svh-3.5rem)]">
<div class="h-[calc(100svh-3.5rem)]">
<Image
src={factory}
alt="Factory"
class="sm:max-h-[calc(100svh-3.5rem)] object-contain w-fit"
/>
</div>
<div class="flex flex-col justify-between">
<Image
src={socks1}
alt="Socks 1"
class="w-fit max-h-[calc(50%-1rem)] object-contain"
/>
<Image
src={socks2}
alt="Socks 2"
class="w-fit max-h-[calc(50%-1rem)] object-contain"
/>
</div>
</div>
</section>
(astro & tailwind)
8 Replies
I have a div with basically three columns: text, an image and a div with two images.Your first issue may well be that in your code you actually only have 2 columns. In the first column you have the logo + text + certificates. In the second column you have factory img + container which in contains 2 images of socks.
Yeah, not sure why that could cause problems though :)
can you make a code pen so I or others can take a look ? i am curious as I have faced this before
i think text will always have precedence over image
you're using flex, and the images can be made smaller
so, the images will be made smaller
use grid for grid things and you shouldn't have flex-as-a-grid issues
When you use flexbox to make columns, the browser looks at how big each column would be if you had a
width: max-content on it. So, if you have text, it would put all that text on a single line to see how big it should be.
The left column would be bigger than the ones with the images because of that, and it keeps that ratio between the different columns as they shrink.
I'd probably make this with grid instead of flex, tbh, but you could probably use heights to fix it if needed. Sharing a codepen (or tailwind playground) thing would be handy :),Thanks, I got it working with grid 👍
Now I've got another issue. The middle image should take up the whole height and be just as high as the right two images. Here's my updated code:
<section
id="about"
class="min-h-svh grid grid-cols-1 md:grid-cols-3 items-center gap-6 px-4 sm:px-12 py-6 sm:py-7"
>
<div class="flex flex-col h-screen lg:max-h-[calc(100svh-3.5rem)]">
<Logo />
<div class="text-orange space-y-7 flex-shrink-0">
<p>
RixtMixt is a premium design label for contemporary, fresh textile
accessories. Crafted by top-tier manufacturers in Italy, every product
is held to the highest standards of quality and sustainability.
</p>
<p>
Backed by years of experience working with Europe's leading high-end
fashion producers, the RixtMixt team is passion- ate about shaping
trends and staying ahead of the curve in the ever-evolving world of
fashion.
</p>
<p>RixtMixt is powered by Little Black Buzzer.</p>
</div>
<div class="flex-1 min-h-0">
<Image
src={certificates}
alt="Certificates"
class="object-contain w-fit h-full"
/>
</div>
</div>
<Image
src={factory}
alt="Factory"
class="object-contain max-h-[calc(100svh-3.5rem)]"
/>
<div class="space-y-8 max-h-[calc(100svh-3.5rem)]">
<Image
src={socks1}
alt="Socks 1"
class="max-h-[calc(50svh-1.75rem-1rem)] object-contain w-fit"
/>
<Image
src={socks2}
alt="Socks 2"
class="w-fit max-h-[calc(50svh-1.75rem-1rem)] object-contain"
/>
</div>
</section>
thanks :)