We've just been editing the index.php file of a Joomla template to add some content to a page, where a module position does not exist.

This is fine however I would like to hide the text if the page is being viewed on a phone but not a tablet or any larger screen size. Is this possible and if so, what PHP code do I need to do this?

Kind regards



You can target mobile resolutions this with CSS media queries. So in your template's CSS file, you could do something like this:

@media (max-width: 767px) {
    .element {
        display: none;

You will of course need to change .element to the class or #id of the element you're trying to hide.

| improve this answer | |
  • 1
    If the template is based on Bootstrap 2.3, you can even just add the class hidden-phone – Bakual Jun 26 '15 at 10:02
  • Hi guys, Thank you both for your replies. The problem is the content is not in a module, rather in the PHP code of the index.php file for the template, I therefore need the PHP code to detect that it's a mobile phone and then hide the text if it is. Is this possible? – favdes Jun 26 '15 at 15:05
  • Can you please update your initial question with your code? – Lodder Jun 26 '15 at 15:20
  • It's just text. It's the PHP code that I'm after, to hide the text. – favdes Jun 30 '15 at 7:36
  • You cant use PHP to hide/show elements on mobiles/desktop. Simply wrap your text in a <div> with a class and target that class in your CSS file as I've shown you – Lodder Jun 30 '15 at 7:49

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.