Hide images on mobile devices in a Joomla article.

asked Jun 3, 2016 in Joomla Templates by joshua (260 points)

Can someone please tell me how to hide images on mobile devices in a Joomla article.

Many Thanks,


3 Answers

answered Jun 3, 2016 by lisa-west (27,280 points)


Please use the following Custom Css at TemplateToaster -> General  -> Editor -> CSS.

@media only screen
and (min-width : 150px)
and (max-width : 767px
.ttr_article .postcontent img{
  display: none;


commented Jun 3, 2016 by joshua (260 points)
Hello Lisa,

Thank you for your quick response. I just tried this and it still does not work. I replaced the existing CSS. Is that correct? Also, I can't reply to your pm with text for some strange reason. Do you have an email address?

commented Jun 10, 2016 by joshua (260 points)
Thanks, I've managed to get this working. What about for tablet devices?

commented Jun 20 by lisa-west (27,280 points)
Currently TemplateToaster provide optiont o enable/disable joomla post image for desktop view. To hide that for mobile view please use the following Custom Css at TemplateToaster -> General  -> Editor -> CSS.

@media only screen
and (min-width : 150px)
and (max-width : 767px)
.ttr_article .postcontent img
  display: none;
answered Apr 22 by zimou13 (180 points)
edited May 9 by zimou13

Is it possible to hide the main website heading on a mobile device, but show it when people are viewing the website on a desktop? on ShowBox Mobdro Vidmate too, I've got quite a big header image on my homepage, however you can hardly see on a mobile so it's not really worth having it. 

commented Jun 18 by showbox (100 points)
Media query css is best option to hide images on mobile.
@media only screen
and (min-width : 150px)
and (max-width : 767px)
  display: none important;
Use showbox app from https://show-box.one/ on your mobile to stream latest movies, and videos.
answered Jun 20 by faulkner555 (140 points)
edited Jun 21 by faulkner555

You can do this easily in your CSS file. No need to touch your HTML or break apart your template. If you wan the logo to disappear at a certain width you can do this:
This rule tells the browser to hide the Images if the width of the browser is 400px or less. Higher than that and this rule is ignored. Just change the value according to when you want the Images to disappear.
Note that using the media rule and is wrapped around the main style rule. You can use media rules for any element in css, not just an image. Mobdro APK

Anyone interested in localization of TemplateToaster v7 in exchange of a Pro License Contact Us