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 you use Tailwind CSS, first you need to start building with phone resolution and move up, so you can use when class="w-full md:w-1/3 lg..." class="w-full md:w-2/3 lg..."