Hiding an image on mobile only using CSS

Question

I would like to have my site remove an image only on mobile which I was able to accomplish using

@media (max-width: 480px) {
  .slide-6996 {
    display:block !important;
  }
  .slide-6996 {
    display:none !important;
  }
}

However, I also would still like to display the text that was on the slide that I am now not showing. I have tried this in CSS, but it obviously didn't work.

@media (max-width: 480px) {
  .slide-6996 {
    display:block !important;
  }

  .slide-6996 {
    display:none !important;
    #slide-content {
      display: block !important; 
    }
  }
}

My HTML for this specific instance is

<div id="slide-6996" class="slide slide-6996 cycle-slide-active slide-left light" style="background-image:url(http://18.205.33.160/wp-content/uploads/2019/02/ITData-Home-Page2018-01-edited.jpg);">    
  <div class="slide-body">
    <div class="container">
      <div class="slide-caption">
        <div class="slide-content">
          <h1><strong>COMPREHENSIVE IT SERVICES YOU CAN TRUST</strong></h1>
        </div>

        <h2 class="slide-title"> Let us help you develop an IT Optimization Strategy and Define your technological priorities </h2>

        <a class="slide-link button button-medium" href="http://18.205.33.160/index.php/itone-method/?customize_changeset_uuid=56ed31cf-ab75-46c7-bf6a-d1eb013fed32&amp;customize_messenger_channel=preview-0&amp;customize_autosaved=on" target="_self"> Learn how we can help you succeed </a>
      </div>
      <div class="slide-image"></div>
    </div>
  </div>
</div>

It should also be worth noting that I am on WordPress and am open-minded to any suggested plugins that may fix my issue.

Answer 1

You can't override inline CSS using external CSS, but what you can do is edit your HTML a bit. By adding a new class in that div and in the external CSS you can make rules for what and when to apply.

So, in first line add a new class "background-cls"—your first line needs to be like this:

<div id="slide-6996" class="slide slide-6996 cycle-slide-active slide-left light background-cls">

Then in your external CSS add something like this:

@media (max-width: 480px) {
  .background-cls {
    background-image: none !important;
  }
}
.background-cls {
  background-image: url(http://18.205.33.160/wp-content/uploads/2019/02/ITData-Home-Page2018-01-edited.jpg);
}

Here's a fiddle: https://jsfiddle.net/2xb34dev/

Answer 2

You can use @media and then hide that class.

@media (max-width: 576px){
  .yourclass{
    display:none;
  }
}

You can choose 767px or 992px for larger size or you can give your @media with between sizee like following example:

@media screen and (max-width: 576px) and (min-width: 767px) {
  .yourclass {
    display: none;
  }
}

Answer 3

With your markup this should work:

@media only screen and (max-width: 480px) {
  .slide-6996 .slide-image {
    display: none !important;
  }
}

Hope that solves it.

Answer 4

您尝试过隐藏img吗？

.slide-6996 img {display:none;}