0

I have a section with 2 columns, 1 for image and 1 for text.

desktop view

The code for this is

<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 highest nutritional value, everyone prefers it. 
          It has retained the grandmas homely taste along with its affordable price. 
        
        </p>
      </div>
    </div>

in the mobile view I want to reduce the size of the image, because there is a carousel above it and the image looks super huge and not looking good.

mobile view

I want to reduce the size of this image to around 40% only for mobile view.

I tried to change the max-width of 100% in img-fluid but then the desktop view is getting altered. I want width to be 100% for desktop view and 40% for mobile view.

James Z
  • 12,209
  • 10
  • 24
  • 44
Chaitra D
  • 177
  • 3
  • 14
  • Duplicate of [Media Queries: How to target desktop, tablet, and mobile?](https://stackoverflow.com/questions/6370690/media-queries-how-to-target-desktop-tablet-and-mobile) – MrUpsidown May 25 '23 at 12:18

1 Answers1

1

You can use media queries for this. You define a width that is baed on media query as follows for example as below:

@media (max-width: 767px) {
  .img-mob {
    width: 40%;
  }
}

Then, you can use your css class with the img element:

<img src="assets/img/logoWithTagline.png" class="img-fluid logoAbout img-mob" alt="">
orabis
  • 2,749
  • 2
  • 13
  • 29