CODEWITHSUNDEEP
cssflexboxtailwind-css
msuliq
msuliq

Reputation: 230

Tailwind CSS set image to take 2/3 of width on desktop

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>

Upvotes: 4

Views: 6126

Answers (2)

Zemame Youcef Oualid
Zemame Youcef Oualid

Reputation: 135

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..."

Upvotes: 2

msuliq
msuliq

Reputation: 230

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.

Upvotes: 0

Related Questions