CODEWITHSUNDEEP
jqueryhtmlcss
ZombieChowder
ZombieChowder

Reputation: 1204

Replacing one image with another on mobile HTML

I am currently trying to replace one image with another only on the mobile version of the website. I tried to change the image using only media queries with CSS but currently is not working. Can someone help me spot my mistake, I think is that one of the parent divs doesn't allow the change but I'm not sure.

I am trying to replace the image with ID "left-image" which is the first one in the code.

Here is the HTML code:

<div class="container-fluid">
            <div class="row " id= "faded">   
                        <img src = "img/logo.png" class ="img-responsive" id = "logo">


                <div class = "col-md-3 col-sm-3 col-xs-12" >

                <img src = "img/1.jpg" class = "img-responsive" id ="left-image">
                        <div class = "carousel-caption" id = "pricing">
                            <h3>PRICING</h3>
                        </div>

                        <div class = "text">
                            HAIRCUT  $60<br>
                            SHAVE     $30<br>
                            COMBO     $80<br>
                        </div>

                </div>

                <div class = "col-md-6 col-sm-6 col-xs-12">

                <img src = "img/2.jpg" class = "img-responsive" id = "middle-image">
                <div class ="carousel-caption" id = "about-us">
                    <h3> ABOUT US </h3>
                </div>

                     <div class = "text-third">
                     <p>FADED IS HERE AND WE'RE BRINGING YOU<br>
                        THE BEST BARBERS FROM ACROSS THE COUNTRY.<br>
                      COME EXPERIENCE THE DIFFERENCE FOR YOURSELF</p>
                     </div>

                <a href="mailto:[email protected]">
                <img src = "img/3.jpg" class = "img-responsive" id= "mid-image">
                    <div class ="carousel-caption" id = "contact-us">
                    <h3> CONTACT US </h3>
                </div>
                        <div class = "text-second">
                        <p>5819 W 4TH ST.<br>
                        LOS ANGELES, CA 90036<br><br>
                        [email protected]<br>
                        310.123.4567</p>
                        </div>
                </a>
                </div>


                <a href = "https://squareup.com/appointments/book/WBBT3O/faded">
                <div class = " col-md-3 col-sm-3 col-xs-12">
                    <img src = "img/4.jpg" class = "img-responsive" id = "right-image">
                    <div class ="carousel-caption" id = "appointments">
                    <h3> APPOINTMENTS </h3>
                     </div>
                            <div class ="text-four">
                                        CLICK HERE TO<br>
                                        GET FADED

                            </div>

                </div>
                </a>

            </div>
</div>

and here is the CSS for the website as well:

 @media only screen and (max-width: 800px) {

        .text, .text-second, .text-four{
        font-size:1em;
        }

        .text-third{
            font-size:0.8em;
        }

        h2, h3{
            font-size:15px;
        }

        #logo{
            width: 25%;
        }

           #pricing{
        bottom:83%;
        left:-30%;
        font-size:2.5em;

        }

        #about-us{
        bottom:83%;
        left: -55%;
        }

        #contact-us{
        bottom: 34%;
        right:-53%;
        }

        #appointments{
        bottom:83%;
        right:25%;
        }
}

 @media only screen and (max width: 480px)  and (max width: 640px){
   #left-image{
   background-image: url("img/mobile/mobile1.jpg");

   }

}

Upvotes: 1

Views: 56

Answers (2)

joeswebdevtips
joeswebdevtips

Reputation: 13

The only way I would know how to do this is 

<script>
$(window).resize(function(){
if ($(window).width() <= 800){  
$('.middle-image').attr('src', 'images/picture.gif');
}   
});
</script>

you can put a url where 'images/picture.gif' is also

im not 110% if this will work but I hope this helps in some way

Upvotes: 0

Pedram
Pedram

Reputation: 16575

Add new image as a new element and set display: none for desktop version and display: block for mobile version. Because you can not set background-image for img element! you should use two img or two must be background not one img another background!

#left-imageNew {
  display: none;
}
@media only screen and (max-width: 800px) {
  .text,
  .text-second,
  .text-four {
    font-size: 1em;
  }
  .text-third {
    font-size: 0.8em;
  }
  h2,
  h3 {
    font-size: 15px;
  }
  #logo {
    width: 25%;
  }
  #pricing {
    bottom: 83%;
    left: -30%;
    font-size: 2.5em;
  }
  #about-us {
    bottom: 83%;
    left: -55%;
  }
  #contact-us {
    bottom: 34%;
    right: -53%;
  }
  #appointments {
    bottom: 83%;
    right: 25%;
  }
}
@media only screen and (max-width: 480px) and (max-width: 640px) {
  #left-imageNew {
    display: bloack;
  }
  #left-image {
    display: none;
  }
}
<div class="container-fluid">
  <div class="row " id="faded">
    <img src="img/logo.png" class="img-responsive" id="logo">


    <div class="col-md-3 col-sm-3 col-xs-12">
      <img src="img/1.jpg" class="img-responsive" id="left-imageNew">
      <img src="img/1.jpg" class="img-responsive" id="left-image">
      <div class="carousel-caption" id="pricing">
        <h3>PRICING</h3>
      </div>

      <div class="text">
        HAIRCUT $60
        <br>SHAVE $30
        <br>COMBO $80
        <br>
      </div>

    </div>

    <div class="col-md-6 col-sm-6 col-xs-12">

      <img src="img/2.jpg" class="img-responsive" id="middle-image">
      <div class="carousel-caption" id="about-us">
        <h3> ABOUT US </h3>
      </div>

      <div class="text-third">
        <p>FADED IS HERE AND WE'RE BRINGING YOU
          <br>THE BEST BARBERS FROM ACROSS THE COUNTRY.
          <br>COME EXPERIENCE THE DIFFERENCE FOR YOURSELF</p>
      </div>

      <a href="mailto:[email protected]">
        <img src="img/3.jpg" class="img-responsive" id="mid-image">
        <div class="carousel-caption" id="contact-us">
          <h3> CONTACT US </h3>
        </div>
        <div class="text-second">
          <p>5819 W 4TH ST.
            <br>LOS ANGELES, CA 90036
            <br>
            <br>[email protected]
            <br>310.123.4567
          </p>
        </div>
      </a>
    </div>


    <a href="https://squareup.com/appointments/book/WBBT3O/faded">
      <div class=" col-md-3 col-sm-3 col-xs-12">
        <img src="img/4.jpg" class="img-responsive" id="right-image">
        <div class="carousel-caption" id="appointments">
          <h3> APPOINTMENTS </h3>
        </div>
        <div class="text-four">
          CLICK HERE TO
          <br>GET FADED

        </div>

      </div>
    </a>

  </div>
</div>

Upvotes: 2

Related Questions