In one section, I have two columns - one for an image and one for text.
https://i.sstatic.net/QMLNF.png
Here is the HTML code:
<div class="row aboutRow">
<div class="col-lg-3 col-sm-2 col-xs-3 col-md-3 text-center">
<img src="assets/img/logoWithTagline.png" class=" img-fluid logoAbout" alt="">
</div>
<div class="col-lg-9 col-sm-10 col-xs-9 col-md-9 pt-4 pt-lg-0 content d-flex flex-column justify-content-center" data-aos="fade-up" data-aos-delay="100">
<div>
<p> IHP Iyengars is serving people since 1990 with its various authentic south Indian food products. There are 6 products currently,
Puliogare masala, Vangibath/Sabji masala, Bisibelebath masala, Chilli powder, Coriander powder and turmeric powder.
All the products are free from any sorts of chemicals, colors, added flavours and preservatives.
</p>
<p>
We take meticulous care right from sourcing raw materials, to testing, processing to production and packaging to branding.
At every step, quality is ensured with perfection which gives it a higher nutritional value.
The organization always aims at providing people with the best quality products at an economic price where anyone can afford
to buy it and is very easy to prepare, quick to make besides, it has always maintained its superior quality and taste.
</p>
<p>
Needless to mention, as these products have the highest nutritional value, everyone prefers it.
It has retained the grandmas homely taste along with its affordable price.
</p>
</div>
</div>
For mobile view, I need to reduce the size of the image to 40% as there is a carousel above it making it appear huge.
https://i.sstatic.net/COKNw.png
I attempted to change the max-width to 100% in the img-fluid class, but this affected the desktop view as well. I want the width to be 100% for desktop view and 40% for mobile view.