Joomla Templates Club 406,261 posts

[villagesquare Friend villagesquareJoin date: August 2007Posts: 29Downloads:34Uploads:2 Thanks: 8]

#192173

Hi,

I have just updated my Ja_Nex site to the T3v3 version, so I could get a responsive template for Mobile, iPAD etc.

Problem is that:
1. Items in top-home1, top-home2, top-home3, do not show in Mobile (they show on desktop and ipad)
2. The header areas occupy too much space and float as one scrolls down
3. Is there a way to make the mobile style automatically pick up the mobile logo?

Please see attachment.

Thanks in advance

---

Attachments:

1. 

[villagesquare Friend villagesquareJoin date: August 2007Posts: 29Downloads:34Uploads:2 Thanks: 8]

#512001

Hi,

I’ve been able to fix issues 2 and 3 via CSS.

However, items in top-home1, top-home2, top-home3 still do not show in Mobile. Please assist.

[phong nam Friend phong namJoin date: May 2015Posts: 3779Downloads:1Uploads:587 Thanks: 499 Thanked: 974 times in 888 posts]

#512109

You can try to create a custom.css file at templates/ja_nex/css/ path and put below css styles into:

/*Display the top-home positions on mobile view*/

@media (max-width: 480px) {
.t3-home1 {
display: block;
}

.container,
.row1 {
width: 100%;
}

.container.t3-home1 .span6,
.container.t3-home1 .span3 {
width: 100%;
margin-left: 0;
}

.module-ct {
max-width: 100%;
overflow: hidden;
}

div.ja-slide-main-wrap,
div.ja-slide-item {
width: 310px !important;
}

.ja-slide-item img {
height: 100%;
width 100%;
}

div.maskDesc {
width: 120px !important;
}

.telineiii .ja-zinfp-featured {
padding: 0;
}

#Mod3921 .ja-zinsec {
width: 100%;
}
}

You may need to adjust some properties that I mentioned above to reach your perfect view, but they will help to make the top-home positions visible and look better on mobile view.

[villagesquare Friend villagesquareJoin date: August 2007Posts: 29Downloads:34Uploads:2 Thanks: 8]

#512385

Thanks. This works.

Is there anyway to disable a specific module from showing in Mobile phones?

<em>@Leo Burnetts 397749 wrote:</em><blockquote>You can try to create a custom.css file at templates/ja_nex/css/ path and put below css styles into:

/*Display the top-home positions on mobile view*/

@media (max-width: 480px) {
.t3-home1 {
display: block;
}

.container,
.row1 {
width: 100%;
}

.container.t3-home1 .span6,
.container.t3-home1 .span3 {
width: 100%;
margin-left: 0;
}

.module-ct {
max-width: 100%;
overflow: hidden;
}

div.ja-slide-main-wrap,
div.ja-slide-item {
width: 310px !important;
}

.ja-slide-item img {
height: 100%;
width 100%;
}

div.maskDesc {
width: 120px !important;
}

.telineiii .ja-zinfp-featured {
padding: 0;
}

#Mod3921 .ja-zinsec {
width: 100%;
}
}

You may need to adjust some properties that I mentioned above to reach your perfect view, but they will help to make the top-home positions visible and look better on mobile view.</blockquote>

[phong nam Friend phong namJoin date: May 2015Posts: 3779Downloads:1Uploads:587 Thanks: 499 Thanked: 974 times in 888 posts]

#512412

You can go to Template Manager >> JA_Nex_style >> Layout tab >> Responsive layout >> Mobile. Then disable the module you don’t want to display on mobile by clicking the eye icon on the top right of each module block.

[villagesquare Friend villagesquareJoin date: August 2007Posts: 29Downloads:34Uploads:2 Thanks: 8]

#512471

Thanks, I understand that. But some blocks dont have the eye icon. How do we disable those?

I really appreciate your help so far.

<em>@Leo Burnetts 398133 wrote:</em><blockquote>You can go to Template Manager >> JA_Nex_style >> Layout tab >> Responsive layout >> Mobile. Then disable the module you don’t want to display on mobile by clicking the eye icon on the top right of each module block.</blockquote>

[phong nam Friend phong namJoin date: May 2015Posts: 3779Downloads:1Uploads:587 Thanks: 499 Thanked: 974 times in 888 posts]

#512472

Can you make a snapshot and tell me which module positions (blocks) you want to hide on mobile view ?

[phong nam Friend phong namJoin date: May 2015Posts: 3779Downloads:1Uploads:587 Thanks: 499 Thanked: 974 times in 888 posts]

#512546

Hi,

Another way is using the css styles to hide the module positions on mobile view with this media query style (i.e):

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

[Author]

Posts