Joomla Templates Club 406,261 posts

[franzonal Friend franzonalJoin date: May 2014Posts: 13Downloads:0Uploads:0 Thanks: 3]

#201083

How do I set a module to only display on mobile devices? In this case we got a module in parallax position that only displays in desktop size. When this one hides, we would like a module to appear in the same position. How is that achieved? Is there certain module-suffixes for this maybe?

[pavit Moderator pavitJoin date: September 2007Posts: 15749Downloads:199Uploads:2274 Thanks: 417 Thanked: 4028 times in 3778 posts]

#548343

Hi

<blockquote>How do I set a module to only display on mobile devices?</blockquote>

Did you tried hiding it for desktop size ?

---

Attachments:

1. 

[franzonal Friend franzonalJoin date: May 2014Posts: 13Downloads:0Uploads:0 Thanks: 3]

#548344

Thank you very much for quick reply pavit! Doesn’t that hide the whole module position and all modules published in that position? I might have been a bit unclear in my previous post. If so, sorry for that. But we want one module to only display in desktop size and another to display on all smaller sizes. Both in parallax position.

[pavit Moderator pavitJoin date: September 2007Posts: 15749Downloads:199Uploads:2274 Thanks: 417 Thanked: 4028 times in 3778 posts]

#548347

Hi

Then you can try adding a module class suffix

Take a look HERE maybe can help in your case

[franzonal Friend franzonalJoin date: May 2014Posts: 13Downloads:0Uploads:0 Thanks: 3]

#548738

Thanks! I will check that link and report back with result.

[franzonal Friend franzonalJoin date: May 2014Posts: 13Downloads:0Uploads:0 Thanks: 3]

#548885

Can’t get this to work. I’ve created the custom.css file and placed inside css folder in appolio folder. My goal is to only display when screen size is less than 768px, but I really can’t get it to work! Can I use something similar to this or how should I go about this?
@media (min-width: 768px){
.t3-module.module hidden-lg {
display: none; }
}

[pavit Moderator pavitJoin date: September 2007Posts: 15749Downloads:199Uploads:2274 Thanks: 417 Thanked: 4028 times in 3778 posts]

#548891

Did you added the hidden-lg suffix to the module ?

[franzonal Friend franzonalJoin date: May 2014Posts: 13Downloads:0Uploads:0 Thanks: 3]

#548892

<em>@pavit 445009 wrote:</em><blockquote>Did you added the hidden-lg suffix to the module ?</blockquote>
Yes I did, sorry forgot to mention that.

[pavit Moderator pavitJoin date: September 2007Posts: 15749Downloads:199Uploads:2274 Thanks: 417 Thanked: 4028 times in 3778 posts]

#548898

Hi

You should use the right suffix for various screen sizes as described in the variable.less file

// Extra small screen / phone
// Note: Deprecated @screen-xs and @screen-phone as of v3.0.1
@screen-xs: 480px;
@screen-xs-min: @screen-xs;
@screen-phone: @screen-xs-min;

// Small screen / tablet
// Note: Deprecated @screen-sm and @screen-tablet as of v3.0.1
@screen-sm: 768px;
@screen-sm-min: @screen-sm;
@screen-tablet: @screen-sm-min;
@container-x-tablet: 1024px;

// Medium screen / desktop
// Note: Deprecated @screen-md and @screen-desktop as of v3.0.1
@screen-md: 992px;
@screen-md-min: @screen-md;
@screen-desktop: @screen-md-min;

// Large screen / wide desktop
// Note: Deprecated @screen-lg and @screen-lg-desktop as of v3.0.1
@screen-lg: 1200px;
@screen-lg-min: @screen-lg;
@screen-lg-desktop: @screen-lg-min;

// So media queries don't overlap when required, provide a maximum
@screen-xs-max: (@screen-sm-min - 1);
@screen-sm-max: (@screen-md-min - 1);
@screen-md-max: (@screen-lg-min - 1);

Then you should compile less to css to make it active

[franzonal Friend franzonalJoin date: May 2014Posts: 13Downloads:0Uploads:0 Thanks: 3]

#548900

Thanks for your help, but I’m afraid I still don’t get it. I saw that code in the tutorial you linked, but can’t understand how to use the suffixes and which to use. Could you please point me in the right direction here? I want to hide the module on desktop, wide desktop, and tablet size according to above dimensions. And I need to avoid overlap when changing from tablet to phone.

Do I need to create a suffix for each size and combine them in the module? Sorry for beeing so slow here..

[grafov Friend grafovJoin date: August 2014Posts: 14Downloads:12Uploads:1 Thanks: 2]

#548923

Hi, did you get an answer for it?

[franzonal Friend franzonalJoin date: May 2014Posts: 13Downloads:0Uploads:0 Thanks: 3]

#549027

<em>@grafov 445052 wrote:</em><blockquote>Hi, did you get an answer for it?</blockquote>
Hi, no I have still not managed to solve this issue. Are you having the same problem?

[pavit Moderator pavitJoin date: September 2007Posts: 15749Downloads:199Uploads:2274 Thanks: 417 Thanked: 4028 times in 3778 posts]

#549028

Hi @franzonal , @grafov

We are waiting to verify behaviours of settings for these settings i showed above.

Please be patient we will answer to it as soon as possible.

Thanks

[franzonal Friend franzonalJoin date: May 2014Posts: 13Downloads:0Uploads:0 Thanks: 3]

#549029

Thank you very much for your help Pavit!

[grafov Friend grafovJoin date: August 2014Posts: 14Downloads:12Uploads:1 Thanks: 2]

#549092

Me too: thanks!

[Author]

Posts