Menu
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.
549
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>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.
27
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
