CODEWITHSUNDEEP
htmlcssbackground-imageresponsive
Arcencielstudio
Arcencielstudio

Reputation: 53

Responsive image - Different images on different screen size

Hi community and thanks in advance for your help. My problem is following, I would like to display some images while on computer screen but switch those images to only one composite image on mobile devices. Here is the code I have:

@media screen and (max-width:480px) {
    .hidden_mobile {
        display:none;
        background-image: url("http://julienleveau.com/wp-content/uploads/2018/04/Mobile-version.jpg");
 	background-repeat: no-repeat;
	background-size: contain;
    }
}
<div class="col-sm-1">
</div>
<div class="col-sm-2">
<img class="hidden_mobile" src="http://julienleveau.com/wp-content/uploads/2018/04/top100.jpg" style="display: block; width: 100%; height: auto; margin: 0 auto 15px" alt="">
</div>
<div class="col-sm-2">
<img class="hidden_mobile" src="http://julienleveau.com/wp-content/uploads/2018/04/WW-1.jpg" style="display: block; width: 100%; height: auto; margin: 0 auto 15px" alt="">
</div>
<div class="col-sm-2">
<img class="hidden_mobile" src="http://julienleveau.com/wp-content/uploads/2018/04/fearless.jpg" style="display: block; width: 100%; height: auto; margin: 0 auto 15px" alt="">
</div>
<div class="col-sm-2">
<img class="hidden_mobile" src="http://julienleveau.com/wp-content/uploads/2018/04/bowp-300-1.jpg" style="display: block; width: 100%; height: auto; margin: 0 auto 15px" alt="">
</div>
<div class="col-sm-2">
<img class="hidden_mobile" src="http://julienleveau.com/wp-content/uploads/2018/04/ispwp.jpg" style="display: block; width: 100%; height: auto; margin: 0 auto 15px" alt="">
</div>
</div>
<div class="col-sm-1">
</div>

So far it works on computer but on mobile it doesn't. It just displays the images on top of each others.

Thank you

Upvotes: 2

Views: 1434

Answers (1)

Victoria Ruiz
Victoria Ruiz

Reputation: 5013

You have 2 problems here:

1) The elements that you are trying to hide in mobile have an inline display:block that overrides the display:none in your stylesheet. That's why you keep seeing the images in mobile. In the running snippet below, I removed all the inline styles, and moved the margins to a class in the stylesheet. You can read more about CSS rule specificity here: https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/

2) Even if you delete the inline styles, you wouldn't see the background image you want, because you added it to an element that had display:none. You need to add that background image to a different element, which I created in the div with class .mobile_only.

With these 2 changes, applied in the snippet below, you can see the different images depending on the resolution of your screen.

.hidden_mobile {
height: auto; width: 100%; margin: 0 auto 15px; 
}
@media screen and (max-width:480px) {
  .hidden_mobile {
    display: none;
  }
  .mobile_only {
    height: 250px;
    background-image: url("http://julienleveau.com/wp-content/uploads/2018/04/Mobile-version.jpg");
    background-repeat: no-repeat;
    background-size: contain;
  }
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-sm-1">
</div>
<div class="col-sm-2">
  <img class="hidden_mobile" src="http://julienleveau.com/wp-content/uploads/2018/04/top100.jpg" alt="">
</div>
<div class="col-sm-2">
  <img class="hidden_mobile" src="http://julienleveau.com/wp-content/uploads/2018/04/WW-1.jpg" alt="">
</div>
<div class="col-sm-2">
  <img class="hidden_mobile" src="http://julienleveau.com/wp-content/uploads/2018/04/fearless.jpg" alt="">
</div>
<div class="col-sm-2">
  <img class="hidden_mobile" src="http://julienleveau.com/wp-content/uploads/2018/04/bowp-300-1.jpg" alt="">
</div>
<div class="col-sm-2">
  <img class="hidden_mobile" src="http://julienleveau.com/wp-content/uploads/2018/04/ispwp.jpg" alt="">
</div>
</div>
<div class="col-sm-1">
</div>
   <div class="mobile_only"></div>
</div>

Upvotes: 1

Related Questions