Hide inline CSS on mobile device

Question

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

Does this answer your question? [How can I override inline styles with external CSS?](https://stackoverflow.com/questions/16813220/how-can-i-override-inline-styles-with-external-css) — str, Sep 03 '20 at 14:18

score 1 · Accepted Answer · answered Sep 03 '20 at 15:36

1

You can overwrite the inline style with !important

answered Sep 03 '20 at 15:36

Genc

162
3

Arivazhagan · Answer 2 · 2020-09-03T15:48:37.857

0

Use !important

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

edited Sep 03 '20 at 15:48

answered Sep 03 '20 at 15:42

Arivazhagan

53
9

Hide inline CSS on mobile device

2 Answers2