Search code examples
cssinline

Hide inline CSS on mobile device

I want to hide inline css background image of a paragraph tag to be hidden on mobile devices. How should I achieve this?

  <div class="items-body">
         <p
         style={{ background: `url('${item.image.childImageSharp.fluid.src}') no-repeat right 30px` }}
         ><Content source={item.sectiontext} /> </p>
   </div>

I tried this in a separate CSS file where items-body CSS is defined but no change

   @media screen and (min-width: 320px) {
    .items-body p{
     background: URL ('');
    }
}

or

   @media screen and (min-width: 320px) {
    .items-body p{
     background: none;
    }
}
Solution

  • You can overwrite the inline style with !important