Joomla Templates Club 406,261 posts

[Richard A Friend Richard AJoin date: January 2013Posts: 190Downloads:19Uploads:14 Thanks: 35 Thanked: 18 times in 2 posts]

#188230

I am using Joomla 3.1.1 on JA Mitius.

I noticed the following modules/positions disappear in the demo for Tablet Portrait and Smartphone sizes but should be there according to the template responsive layouts for those devices:

Headlines…………………top-newsticker
Slideshow Lite…………..slideshow
Content Slider…………..slidenews
Custom Banner…………slidenews
Content Pop Up………..position-1

The top menu also disappears but is shown at the top of the responsive layout for Tablet and Smartphone.

The items disappear on my own site, as in the demo, is this a fault to be corrected?

I know the Main Menu is adjusted to off canvas and works well, but it seems odd for a whole area of content to vanish.

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#495879

This is not bug because the resolution in Portrait Tablet and Mobile device is so small, we have hidden some positions on it, this helps to increase performance and nice looking in mobile devices.

Regards

[Richard A Friend Richard AJoin date: January 2013Posts: 190Downloads:19Uploads:14 Thanks: 35 Thanked: 18 times in 2 posts]

#495899

Thank you for letting me know, appreciated.

[sling19 Friend sling19Join date: February 2013Posts: 30Downloads:0Uploads:16 Thanks: 13]

#497791

Hi Ninja Lead,

May i know how to unhidden the slideshow in Portrait Tablet and Mobile device? Thanks!

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#497915

Due to concept of this JA Mitius Template, JA Slideshow Lite module is hidden. In this case you want to show it, you can follow with my solution

Open templates/ja_mitius/css/template-responsive.css file

from

.ja-slideshow {
display: none;
}
.ja-slideshow .left-slideshow,
.ja-slideshow .right-slideshow {
width: 100% !important;
display: none !important;
}
.ja-slideshow .right-slideshow {
margin-left: 0px !important;
margin-right: 0 !important;
display: none !important;
}

Change to

.ja-slideshow {
display: block;
}
.ja-slideshow .left-slideshow,
.ja-slideshow .right-slideshow {
width: 100% !important;
display: block !important;
}
.ja-slideshow .right-slideshow {
margin-left: 0px !important;
margin-right: 0 !important;
display: block !important;
}

If you don’t use default theme you can find css file on this path: templates/ja_mitius/css/themes/your_theme/template-responsive.css

1 user says Thank You to Ninja Lead for this useful post

1. sling19

[sling19 Friend sling19Join date: February 2013Posts: 30Downloads:0Uploads:16 Thanks: 13]

#498231

hi,

Thanks!
now the slideshow module is appear in smartphone portraits.
but there is quite a lot extra spaces under the slideshow? how could i remove it?

---

Attachments:

1. 

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#498253

I could not find extra spaces under the slideshow as your mention, see the screenshot

You need to put image on the JA Slideshow Lite and provide the url of the site you’re working on. So that I can take a look and try to assist

---

Attachments:

1. 

[sling19 Friend sling19Join date: February 2013Posts: 30Downloads:0Uploads:16 Thanks: 13]

#498408

Hi Ninja Lead,

I just setup JA_Mitius in live.

I modified the code as you mentioned before only. It just look same, and the alignment for slideshow and today hightlight module doesn’t align center. Please have a look. Thanks!
/www/mitiusj25/templates/ja_mitius/css/template-responsive.css

http://3in1sharing.org/mitiusj25/

---

Attachments:

1. 
2. 

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#498480

I have compared and added some my fixes into template-responsive.css file

You can download and copy my file into: templates/ja_mitius/css/template-responsive.css (remember backup old file before updating)

Let me know if it helps

---

Attachments:

1. template-responsive.zip

[sling19 Friend sling19Join date: February 2013Posts: 30Downloads:0Uploads:16 Thanks: 13]

#498515

thank you very much.

I just overwrite the file, but the slideshow not shown in mobile device anymore. :((
http://3in1sharing.org/mitiusj25/

Could i pm my ftp details to you? Please~

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#498685

<em>@sling19 380089 wrote:</em><blockquote>thank you very much.

I just overwrite the file, but the slideshow not shown in mobile device anymore. :((
http://3in1sharing.org/mitiusj25/

Could i pm my ftp details to you? Please~</blockquote>

Please send pm me admin access and ftp account of your site. I shall help you to solve this problem

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#498704

Thanks for your pm.

I fixed the problem directly on your site, you can check it again

Open templates/ja_mitius/css/custom.css file

and saw new script

@media(max-width: 767px) {
.ja-slideshow {
display: block !important;
}

.ja-slideshow .left-slideshow {
display: block !important;
}
.main-slideshow {
margin-left:0px !important;
}
.ja-slideshow .container {
padding-bottom: 0px !important;
}
.ja-ss-item{
min-height:200px !important;
}
.ja-ss-desc{
bottom: 0px !important;
padding:0px !important;
}
.ja-ss-btns {
bottom: 0px !important;
right: 0px !important;
}
}


Let me know if it helps

1 user says Thank You to Ninja Lead for this useful post

1. sling19

[sling19 Friend sling19Join date: February 2013Posts: 30Downloads:0Uploads:16 Thanks: 13]

#498715

It works! Thank you very much!

Just one more question.
how to make the background (1050px*130px ) at header container to be responsive?

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#498821

Yes, I helped you to do this on your site

Open templates/ja_mitius/css/custom.css file

add new script

.ja-header .container {
background-repeat: no-repeat;
background-size: 100% 130px !important;
padding: 0;
}
}

1 user says Thank You to Ninja Lead for this useful post

1. sling19

[Author]

Posts