CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3
Sam Jefferies
Sam Jefferies

Reputation: 594

Width: 100%; making images on desktop bigger than original size

I have three images in a row all with a width of 323px.

To make my site responsive I've switched from width: 323px; to width: 100%; this works on mobile but on bigger browsers the images become bigger than their original size and thus stretched and distorted.

Note: I'm using Bootstrap

Live link: http://185.123.96.102/~kidsdrum/moneynest.co.uk/

CSS

.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

<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>

Upvotes: 0

Views: 2396

Answers (2)

Aziz
Aziz

Reputation: 7793

If you want the images to be responsive (I.E 100% width) and still not get bigger than 323px wide then you can use the CSS max-width property.

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

Upvotes: 2

İbrahim Duran
İbrahim Duran

Reputation: 378

You need to use CSS media queries for mobile compatibility. First add this meta tag to your html to use media queries

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

Now you can apply custom css rule if the device screen width is smaller than 400px with the following css code.

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

Upvotes: 1

Related Questions