'CSS to swap div from desktop to mobile

I have two divs for desktop and mobile, but the div for mobile doesn't show when I use the Inspect tool to pick different sizes for mobile.

.outdoor { 
  display:block; 
}

.outdoor-m { 
  display:none; 
}

@media screen and (max-width:600px) {
  .outdoor { 
    display:none!important; 
  }
 
  .outdoor-m { 
    display:block!important; 
  }
}
<div class="outdoor">
  <img src="outdoor.jpg">
</div>

<div class="outdoor-m">
  <img src="outdoor-600.jpg">
</div>

Really appreciate your help

cssmedia-queries


Solution 1:[1]

The following example shows the <div> element with the .outdoor class style applied on desktop and tablet devices; this <div> element is not displayed on mobile devices. The <div> element with the .outdoor-m class style is displayed on mobile devices; this <div> element is not displayed on desktop and tablet devices. For mobile compatible devices, the maximum screen width should be 768px to write a media query. To test the application, you can enlarge or reduce the width of the page in the full-screen preview.

.outdoor{
  display: block; 
}

.outdoor-m { 
  display: none; 
}

@media screen and (max-width:768px) {
  .outdoor { 
    display: none !important; 
  }
  
  .outdoor-m { 
    display: block !important; 
  }
}
<h1 class="outdoor">Active: Desktop</h1>
<h1 class="outdoor-m">Active: Mobile</h1>

<!-- This <div> is displayed on desktop devices and tablets. -->
<div class="outdoor">
  <img src="https://via.placeholder.com/500">
</div>

<!-- On mobile devices this <div> is displayed. -->
<div class="outdoor-m">
  <img src="https://via.placeholder.com/250">
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions