CODEWITHSUNDEEP
cssinline
Emma Expat
Emma Expat

Reputation: 87

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;
    }
}

Upvotes: 0

Views: 392

Answers (2)

Arivazhagan
Arivazhagan

Reputation: 53

Use !important

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

Upvotes: 0

Genc
Genc

Reputation: 162

You can overwrite the inline style with !important

Upvotes: 1

Related Questions