0

I am making a joomla module and I want it to be responsive for different mobile devices.

As a joomla module injects some contents in a specific part of the whole page, so other contents of the page may not be responsive unless the template is responsive.

In this case if the whole page template is not responsive, how do I make the content of my that module responsive?

I read some articles about making whole site responsive but not some parts of content. So then to start achieving my goal, if this meta is necessary to be put in the page - 

 <meta name="viewport" content="width=device-width">

How it affects other non-responsive content of the site page? On the other hand, is it difficult and bad practice to show responsiveness for some parts of content instead of whole?

My approach: I've tried to use t bootstrap responsive feature by putting all classes in bootstrap.css and bootstrap-responsive.css under a custom class ".container_class" and placed my all content in module under that class so that only module content inherits bootstrap styles, and without declaring above meta content, I saw that if I resize browser, content of the module resized but did not test fully taking into account some other things.

So is this approach fruitful..? Or how do I achieve my goal?

Martin54
  • 1,349
  • 2
  • 13
  • 34
developer
  • 78
  • 1
  • 13
  • 2
    Try looking up `@media` queries, [as an example](http://css-tricks.com/css-media-queries/). Side note: post your generated `HTML` and we maybe able to provide a suitable code suggestion. – Xareyo Dec 12 '13 at 15:14
  • My content comes automatically from facebook by ajax call, as i am showing facebook group feed.this content includes text,images,others you can imagine.just think some content with text, link, images, icons,...Is media queries enough and what about meta tag i wrote? – developer Dec 12 '13 at 15:21

1 Answers1

0

The details you want for the meta tag are:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

If the template itself is not responsive then there's no way of predicting the final result without some trial and error though.

If other elements in the template or other extensions have hard coded widths which don't resize for smaller viewports, you may still have some success by adding some custom CSS, for example changing the body width from a hard coded 960px to inherit or 100%

I don't think there's any harm in trying. Naturally, eventually moving to a responsive template and probably Joomla 3 would be the ideal solution.

Good luck!

David Taiaroa
  • 25,157
  • 7
  • 62
  • 50