CODEWITHSUNDEEP
csstwitter-bootstrap
Riteu
Riteu

Reputation: 57

Hiding an image in responsive?

I am new to bootstrap coding and CSS I am stuck in one issue where in the desktop version i need one image but when it comes to the mobile version i need the second image to be shown and first image should hide. 

<div class="col-md-9" style="padding: 0px;">
    <img src="images/Trinity-Garden-landing-Page-1.jpg" width="1350px" />
    <img src="images/Trinity-Garden-landing-Page-4.jpg" width="1350px" />
</div>

Help needed.

Upvotes: 4

Views: 25653

Answers (5)

j-printemps
j-printemps

Reputation: 1298

You may want to have a look at the picture element. Support is quite good now. Example:

<picture>
  <source srcset="mdn-logo-wide.png" media="(min-width: 600px)">
  <img src="mdn-logo-narrow.png" alt="MDN">
</picture>

Upvotes: 0

roopa mishra
roopa mishra

Reputation: 491

Please implement this code.

You can change max width in media query according to your need. Also please expand snippet to check hide and show image according to device. I hope it will work for you.

<style>
.image_section img{
    display: block;
}

@media (max-width:640px){
    .image_section img:first-child{
        display:none;
    }
}
</style>


<div class="col-md-9 image_section" style="padding: 0px;">
    <img src="images/Trinity-Garden-landing-Page-1.jpg" />
    <img src="images/Trinity-Garden-landing-Page-4.jpg" />
</div>

Upvotes: 10

Karam Qubsi
Karam Qubsi

Reputation: 86

UPDATED : Try these classes : http://getbootstrap.com/css/#responsive-utilities-classes

for the image that must only show in the desktop use :

hidden-xs hidden-sm hidden-md

for image that must show only on mobile use :

hidden-lg hidden-xl

example :

<div class="col-md-9" style="padding:0px;">
  <img  class=" hidden-lg hidden-xl " src="images/Trinity-Garden-landing-Page-1.jpg" width="1350px" />
  <img class="hidden-xs hidden-sm hidden-md" src="images/Trinity-Garden-landing-Page-4.jpg" width="1350px" />
</div>

Upvotes: 0

KiranPurbey
KiranPurbey

Reputation: 335

Use the below code, It might help you..

<!DOCTYPE html>
<html>
  <head>
    <title>Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="Masters_baby.css">
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <style type="text/css">
       @media(max-width:767px){
            .image1 {
                display: block!important; 
            }
            .image2 {
                display: none !important; 
            }
        }
    </style>
  </head>
  <body>
        <div class="row">
             <img src="img/kiran.png" alt="img1" style="height: 200px;width: 200px;display:none;" class="image1">   
             <img src="img/kiran2.png" alt="img1" style="height: 200px;width: 200px;display: block;" class="image2"> 
        </div>
  </body>
</html>

In that I used @media query to hide first image and display second image on mobile view.

Upvotes: 1

niyasc
niyasc

Reputation: 4490

You can use bootstrap responsive utilities for showing/hiding components based on the screen size.

Your code snippet has been modified as an example.

  • The first image will be visible in medium sized screens only
  • The second image will be hidden on medium sized screens

<div class="col-md-9" style="padding:0px;">
  <img class="visible-md-block" src="images/Trinity-Garden-landing-Page-1.jpg" width="1350px" />
  <img class="hidden-md" src="images/Trinity-Garden-landing-Page-4.jpg" width="1350px" />
</div>

Upvotes: 0

Related Questions