Expanding to a full width of 100%, images on desktop screens are displayed larger than their original

I am facing a challenge with my three images lined up in a row, each with a width of 323px.

In order to make my website responsive, I decided to switch from using width: 323px; to width: 100%;. While this adjustment worked well on mobile devices, I encountered a problem on larger browsers where the images appeared larger than their original size, ultimately becoming stretched and distorted.

Important Note: Bootstrap is being utilized on my website.

For a live demonstration, you can visit:

CSS Styles

.tripleimage {
    border-radius: 3px;
    border: 1px solid #021a40;
    padding: 1px;
    margin-bottom: 15px;
 width: 100%;
        -webkit-box-shadow: 5px 5px 10px #A3A3A3;
    -moz-box-shadow: 5px 5px 20px #A3A3A3;
    box-shadow: 3px 3px 10px #A3A3A3;
    }

HTML Markup

<div class="container-fluid bg-3 text-center">    
  <h3 class="h3big">What do you need help with?</h3><br>
  <div class="row">
    <div class="col-sm-4">
         <img src="http://185.123.96.102/~kidsdrum/moneynest.co.uk/img/button-1.png" alt="button-1" class="middleimages">
         <div class="box-content">
                       <p class="alltextbig text-uppercase"><b>Living</b> paycheque to paycheque?</p>
                       <figure><img src="http://185.123.96.102/~kidsdrum/moneynest.co.uk/img/pound-coins.jpg" alt="saving money image" title="Saving money" class="tripleimage">
                       <figcaption><b>Feel like you're walking on a tightrope every day?</b> <br>Stuck in a pay cheque to pay cheque cycle, can't keep your budget in check, dont have a budget, use credit cards or have no savings? <br><br>

                       <b>Lesson 1</b> - Learn how I escaped the pay cheque to pay cheque cycle.</figcaption>

                       </figure>


<input type="submit" value="Start Class Now" name="subscribe" id="mc-embedded-subscribe" class="text-uppercase btn btn-primary btn-lg btn-middle" style="margin-top: 11%">

              </div>
              </div>
    <div class="col-sm-4 columnBorder"> 

       <img src="http://185.123.96.102/~kidsdrum/moneynest.co.uk/img/button-2.png" alt="button-1" class="middleimages">
       <div class="box-content column-border">
           <p class="alltextbig text-uppercase"><b>Saving</b> to buy a home?</p>
           <figure>
             <img src="http://185.123.96.102/~kidsdrum/moneynest.co.uk/img/saving-to-buy-a-home.jpg" alt="Buying a house" title="Saving to buy a house" class="tripleimage"><figcaption><b>Is saving for a house causing you anxiety?</b> Stressed out over a correction or rise in interest rates?<br><br>
Worried if you don't buy now house prices will continue to rise and out price you?<br><br>
             <b>Lesson 2</b> - Tips to rapidly save for your future home.
             </figcaption>
             </figure>

           <input type="submit" value="Start Class Now" name="subscribe" id="mc-embedded-subscribe" class="text-uppercase btn btn-primary btn-lg btn-middle" style="margin-top: 6%">
      </div>
      </div>
    <div class="col-sm-4"> 
       <img src="http://185.123.96.102/~kidsdrum/moneynest.co.uk/img/button-3.png" alt="button-1" class="middleimages">
       <div class="box-content">
      <p class="alltextbig text-uppercase"><b>Want</b> to make more money?</p>
      <figure>
        <img src="http://185.123.96.102/~kidsdrum/moneynest.co.uk/img/going-travelling.jpg" alt="How to make more money" title="How to make more money"  class="tripleimage">
        <figcaption><b>Want to increase your income?</b>
       <br>Want to drive a better car, go travelling or live in a better neighbourhood? Increase your income to scale up your savings and substantially improve your current lifestyle. 

        <br><br><b>Lesson 3</b> - It's not just about being frugal. How to easily increase your income without taking large risks.
        </figcaption>
        </figure>

    <input type="submit" value="Start Class Now" name="subscribe" id="mc-embedded-subscribe" class="text-uppercase btn btn-primary btn-lg btn-middle">

    </div>
    </div>
  </div>
</div>

Answer №1

To ensure that images are responsive, with a maximum width of 323px, you can utilize the CSS max-width attribute.

.tripleimage {
    width: 100%;
    max-width: 323px;
}

Answer №2

Ensure mobile compatibility by utilizing CSS media queries. Start by inserting this meta tag into your HTML code:

<meta name="viewport" content="width=device-width, initial-scale=1">

Next, if the device screen width is less than 400px, you can implement a custom CSS rule using the following code:

@media screen and (max-width: 400px) {
   .tripleimage {
       width: 100%;
   }
}

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

Automatically tally up the pages and showcase the page numbers for seamless printing

I've been tackling a challenge in my Vue.js application, specifically with generating invoices and accurately numbering the pages. An issue arose when printing the invoice – each page was labeled "Page 1 of 20" irrespective of its actual position in ...

Responses were buried beneath the inquiries on the frequently asked questions page

My FAQs page is in pure HTML format. The questions are styled with the css class .pageSubtitle, and the answers have two classes: .p1 and .p2. Here's an example: <p class="pageSubtitle">Which Award should I apply for?</p> <p class="p1" ...

When an image is hovered over, the HTML background undergoes a transformation

Essentially: div:hover { body{ background-image:(bg.png); } } This code is conceptual but flawed, yet it effectively illustrates my problem. ...

When I employ ngroute, the Angular section in the html page does not display

I am looking to implement a fixed menu named "fixed_admin.html" on my website: <!DOCTYPE html> <!-- saved from url=(0069)https://hackerstribe.com/guide/IT-bootstrap-3.1.1/examples/dashboard/ --> <html lang="en"><head><meta htt ...

Adding to the beginning of a list in JQuery mobile

Having trouble figuring out how to prepend my list in jQuery mobile while keeping the divider on top of the most recent item added. I attempted to prepend the newly added item, but it ended up shifting the divider to the bottom instead. function loadScan ...

Including an image side by side with clickable text within a list

Check out my progress here: http://jsfiddle.net/dDK6z/ I've experimented with using display:inline(-block), as well as adjusting margins, padding, and more, but I can't seem to get the image to move down or the text to move up. Does anyone have ...

Display and conceal different sections using hyperlinks

Hey there, I'm back with another issue related to this code snippet on jsfiddle: https://jsfiddle.net/4qq6xnfr/9/. The problem I'm facing is that when I click on one of the 5 links in the first column, a second div appears with 3 links. Upon clic ...

What is the best way to eliminate existing double quotation marks within string values stored in objects in Angular?

When using Angular, data is retrieved in object form from the database to the backend and then to the frontend. Here's how it looks in HTML: <h3>Payslip for the month of {{dataout[0].MonthYear | json }}</h3> The issue arises when running ...

Developing 2 potential results from textarea input using NODE.JS and HTML

Today, I encountered an issue while working on my bot website project that responds to textarea input. When I attempted to test it with two different commands, one of the commands stopped working unexpectedly. I'm puzzled by this and would greatly app ...

The text element does not line up with the icons

As I'm working on creating my first account page header, I've run into an issue with some of the icons not aligning perfectly with the text. While advanced developers may find this task simple, as a beginner, I could really use some advice on how ...

Is it possible to include a shared helper text for two textfields that have been imported from MUI in a React.js project?

This snippet contains the code for my password container: .password-form-container { width: 85%; height: 7%; position: relative; top: 230px; left: 40px; display: flex; justify-content: space-between; border: 1px solid red; } <div clas ...

What is the best method for integrating static files (such as css, images, js, etc.) into our Node.js application?

Here is the structure of my project folder: XYZ_PROJECT_FOLDER ASSETS CSS IMAGES JS VENDOR CONTACT.html INDEX.html INDEX.js In the INDEX.js file, I have included code to render all the static files and routing logic: const e ...

Can a Textmate snippet be activated using a Regex pattern instead of just a specific character?

Hey there, I've been spending a lot of time working with CSS recently, and I have to admit that constantly typing "px" after every width, height, margin, etc., is starting to get on my nerves. I find myself refining pixel values in Firebug quite ofte ...

What is the method for accessing font sizes through CSS code?

Why is the font size value in CSS returning incorrect values? Check out this jsFiddle example Here's the HTML code snippet: <div id="test">TEXT</div> <div id="test2">TEXT2</div> Now, take a look at the CSS: #test{ font ...

Remember to follow the camel case convention when utilizing element.tagName(String) with jSoup

Looking to change the name of an HTML tag using Jsoup in the following way - element.tagName("p:panelGroup"); But when I run this code, the output changes the case and I end up with p:panelgroup. Is there a method to preserve the camel case in the resul ...

Ways to eliminate a textbox from an HTML table using jQuery or JavaScript while retaining the textbox values

Currently, I am facing a task where I have a table with a column filled with textboxes. My goal is to eliminate the textboxes using jQuery/JavaScript while retaining the values within them. Here are a couple of methods I have attempted: // removes both t ...

Methods for Obtaining the Base URL Together with href Links

Currently, I find myself at this location: localhost/magento/dresses/adidas-t-shirt.html In my file, I have written the following: <a href="my/hello/">Click Here</a> When I click on Click Here, I am directed to: localhost/magento/dresses/ ...

Ways to align a Unordered List (ul) in the middle

I have a list of items with some elements floated to the left. Currently, it looks like this: | A | B | C | D | E < empty space> | I would like it to appear as: | A | B | C | D | E | Centered on the page with centered contents as well. HTML < ...

Having issues transferring values from one page to another. Any suggestions to make it work correctly?

I currently have two pages within my website, one is called details.page and the other is maps.page. In the details page, I have set up a search input as shown below : <form method="get" id="form-search" data-ajax="true" action="maps.page"> ...

Personalized Bootstrap 4 grid system

Could someone guide me on how to create this grid layout with Bootstrap 4? I am trying to achieve a design where one column stretches from the edge of the window to the inside, while the other column is half the width of a standard .container element. ht ...