Looking to shrink the image dimensions for optimal mobile display using bootstrap

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.

Answer №1

To achieve this effect, you can implement media queries in your CSS. Define a specific width for a class based on a media query, like this:

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

After setting up the media query, you can apply the CSS class to your image element like so:

<img src="assets/img/logoWithTagline.png" class="img-fluid logoAbout img-mob" alt="">

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ensure the vertical dimension of the webpage is properly maintained

I am currently working with a client who has requested a website design with a specific height for the content section. The Inquiry: Is it possible to automatically create a new page for text that exceeds the maximum height of the content section on the ...

Ensure the checkbox is aligned properly with its border and outline for a seamless user experience

Having trouble with my customized checkbox CSS. The outline and border aren't consistent when focusing or clicking. I attempted to apply the same properties to the focus pseudo class with no success. Below is the HTML and CSS code for my checkbox: HT ...

retrieve the position of a descendant element in relation to its ancestor element

I'm encountering a challenge while attempting to solve this issue. I have elements representing a child, parent, and grandparent. My goal is to determine the offset position of the child (positioned absolutely) in relation to the grandparent. However, ...

What impact does the order of the element I'm specifying in my .css file have on its appearance after being rendered?

(An update has been added below) In my project, I am working with a .css file and an index.html document. The goal is to create a panel of buttons on the screen [to prototype the usability of a touchscreen interface], with each button assigned a specific ...

Is there a way to choose columns 2 to 6 of the row that is currently selected

I am looking to create a hover effect for columns 1 through 7 of a row where, when the user hovers over any column within that range, certain styles are applied to all columns in the row except for columns 1 and 7. This means that the background color shou ...

Develop a JSON structure that represents an array of dynamically generated fields in PHP

Need help converting data from a PHP form into a specific JSON format. Struggling to create the right array that can be easily converted into JSON format. Here is a snippet of the array structure: Array ( [user_id] => [title2] = ...

How can I incorporate margins or adjust scaling within dompdf?

After creating a PDF using dompdf with the paper size set to A6, I am experiencing issues when trying to print it on A4 and letter paper sizes. The left and top borders are being cut off. Is there a way to generate a PDF that is compatible with A4, A6, l ...

Instructions on filling the star icon with color upon clicking the button

Currently working on a project using codeIgniter where I have a form for rating products. I am facing an issue where, upon clicking the star button, only the border color changes to yellow while the center of the button remains white. Can someone please g ...

What are the steps to implement a horizontal scroll feature on a website when the scroll width is set to 0?

My goal is to enable users to scroll in the web view similar to how they can drag to scroll on mobile devices Check out my sandbox here for reference I have created a sample sandbox with the following code: <!DOCTYPE html> <html lang="en&qu ...

Stacked divs needed to be aligned vertically

Is there a way to make the head and main tabs fixed vertically one below the other? Keep in mind that these need to be separate angular components and cannot be combined under another div. The rows also need to be scrollable. .pages { float: left; ...

Using an HTML ellipsis without setting a specific width

I am working on achieving a specific layout as shown in the screenshot below. If both SPAN and B fit within the box, they should be displayed one after another. If they do not fit, SPAN should have an ellipsis while B is fully displayed (never larger tha ...

"Unfortunately, the JavaScript external function failed to function properly, but miraculously the inline function

Struggling to create a fullscreen image modal on the web? I was able to get it working fine when embedding the script directly into my HTML file, but as soon as I moved it to an external JS file, things fell apart. I've double-checked all the variable ...

It appears that Internet Explorer is still animating/processing my loading.gif despite being set to display:none

It seems that the issue I'm encountering is related to the inconsistent starting position of the loading.gif animation when performing an ajax request. In Internet Explorer, the animation appears to start from a random point, while in Firefox it alway ...

What could be causing my scrollable div to not function properly within a Bootstrap modal?

I am facing a frustrating issue. I have a simple DIV element that I want to make scrollable, containing a table inside it. The process should be straightforward as I have a separate .html file with the code that functions correctly. Here is an excerpt of ...

Arrange the side by side display of uploaded image previews

Could someone please assist me with aligning my image upload preview in a row, similar to a brand/partners slider? The current preview output is not displaying as desired. Here is the code I have: <div class="image-gallery"> <div class ...

Hovering over the top menu items in AngularJS will reveal dropdown submenus that will remain visible even when moving the cursor

I am facing an issue where my top menu has links that display a dropdown of additional menu items upon hovering. I have attempted to use onmouseover and onmouseleave events to control the visibility of the sub menu. However, I have encountered a problem ...

Obtain a unique HTML ID dynamically with Selenium and VBA

I am currently working on automating a web form using Selenium and VBA. The form includes a search box that generates an autogenerated list when a value is entered. While I can successfully input a value into the search box and trigger the javascript to cr ...

Tips for fading an image as you scroll using CSS and JavaScript?

I have been dedicating my day to mastering the art of website development. However, I am facing a challenge that is proving to be quite difficult. I am looking to create a smooth transition effect where an image gradually blurs while scrolling down, and re ...

Tables lacking borders where rowspans are present

I'm currently using Firefox and have the following code snippet: html, body { width: 100%; height: 100%; } * { box-sizing: border-box; } body { padding-left: 20px; padding-right: 20px; } .visitentabelle { border: 2px solid black; ...

Incorporate Margins for Table Cells in Outlook (HTML Email)

I'm currently in the process of creating an email newsletter and testing it out on Litmus. Here's how the newsletter design should appear (refer to the image below): Although I understand that it may not look exactly the same on Outlook, is the ...