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

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 >
  <div >
    <a  href="javascript:;">
      <img  src="http://...">
    </a>
    <a  href="javascript:;">
      <img  src="http://...">
    </a>
  </div>
</div>

CodePudding user response：

when u use tailwind css first u need to start building with phone resolution and move up ,so u can use when ,i wish that will help u :) !!

CodePudding user response：

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 >
  <div >
    <a  href="javascript:;">
      <img  src="http://...">
    </a>
    <a  href="javascript:;">
      <img  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.