percentage width behaving weirdly

hey folks this is my code
const OurMission = () => {
return (
<section className="flex relative p-8">
<div className='w-[60%]'>
<h1>Learn more</h1>
<h1><span>About our</span> Missions</h1>
<span></span>
<p>
Buy One Gram is a Paltform or Service Provider Working with Farmers,
Agro Industry, Exporters, Wholesaler, Big Stores, Mart, Grocery selling
Online Platform To Increase Farmers Income, Direct Selling, Export from
Farmers Field, Reduce Delivery Time, Transportaion Cost Etc.
Provide farmers to a logging Pannal to get in touch with daily update's.
Also Provide Demand, help to Sell Agro Products as Quality, after all buying
procedure Shift to B1G Warehouse and Delivery to the Consumer Receive
order and Demand from Exporter, Agro Industry, Store Etc.
Make sure for payment safety, Quality assurance and On time Delivery with Safety.
Through the use of technology connect the farmer and the end consumer at one single point.
Thus providing a simple platform to benefit both. Own Buy One Gram Wholesale Application that
Provide all product to Shop or Mart We Directly connected to 20 Big Mart and 56 Small Outlet
</p>
</div>
<div>
<img className='h-full w-full object-cover object-center' src='farming.png' alt='Farming' loading='lazy'/>
</div>
</section>
)
}

export default OurMission
const OurMission = () => {
return (
<section className="flex relative p-8">
<div className='w-[60%]'>
<h1>Learn more</h1>
<h1><span>About our</span> Missions</h1>
<span></span>
<p>
Buy One Gram is a Paltform or Service Provider Working with Farmers,
Agro Industry, Exporters, Wholesaler, Big Stores, Mart, Grocery selling
Online Platform To Increase Farmers Income, Direct Selling, Export from
Farmers Field, Reduce Delivery Time, Transportaion Cost Etc.
Provide farmers to a logging Pannal to get in touch with daily update's.
Also Provide Demand, help to Sell Agro Products as Quality, after all buying
procedure Shift to B1G Warehouse and Delivery to the Consumer Receive
order and Demand from Exporter, Agro Industry, Store Etc.
Make sure for payment safety, Quality assurance and On time Delivery with Safety.
Through the use of technology connect the farmer and the end consumer at one single point.
Thus providing a simple platform to benefit both. Own Buy One Gram Wholesale Application that
Provide all product to Shop or Mart We Directly connected to 20 Big Mart and 56 Small Outlet
</p>
</div>
<div>
<img className='h-full w-full object-cover object-center' src='farming.png' alt='Farming' loading='lazy'/>
</div>
</section>
)
}

export default OurMission
I have set the width of div containing text to 60% which means it should 60% width of containing section but it's happening exactly opposite image container is taking 60% width instead you guys can see it in attached image can anyone tell me why its happening
5 Replies
13eck
13eck2y ago
Try setting the image to max-width: 100%; instead of width: 100%. That might be the issue.
Nikita
Nikita2y ago
Try set max-width:50% to both
Nikita
Nikita2y ago
If you want image w-100% do like this <div class='flex flex-col'> <img class='max-w-[100%]> <p> </div>
Aditya Kirad
Aditya Kirad2y ago
tried that but it didn't worked I have explicitly set the image container width to my desired width
nublet
nublet2y ago
Yes I thin its best practice to wrap your images in some sort of container like a figure or a div and set its width how you want it So
<figure className="img-container max-width: 40% width: 100%>
<img width:100%>
</figure>
<figure className="img-container max-width: 40% width: 100%>
<img width:100%>
</figure>
Or if you dont want that maybe doing a flex-grow: 1 on the image and remove its width Then it should take up the remaining space if you've set the div to 60%
Want results from more Discord servers?
Add your server