image not display on mobile device

Hello,
i would like to hide a picture in the right side bar (into a custom module) when i am looking at the webstite in a tmobile device or small tablet.
i intend to use the following css rule :

@media all and (max-device-width: 820px)
{
img { display: none; }

@media only screen and not (min-device-width: 360px)
{
img { display: none; }
}

but I can't find in which css file I must insert it.
thks for help.
pascal

override.css is the best place
Just remember to enable "CSS override" in template settings - advanced section.

Thks,
i added the following code

@media all and (max-device-width: 480px)

{
img { display: none; }
}

@media only screen and not (min-device-width: 820px)
{
img { display: none; }
}
but the image still appear in my mobile? is there something wrong in my css code?

any help please.
thks in advance

As I understand it doesn't work?
Could you please post an url to your site?

yes it doesnot work .
the image still appears on the right side even in a mobile or when the browser window is reduced.
the url of the concerned page is http://www.phaedra-ellipse.fr/index.php ... -contacter

thks a lot for your advice.
pascal

This code will work:

Code: Select all

@media (max-width: 480px) {
   img { display: none !important; }
}


the problem is within inline styling of this element - that is why you need to use important.