Joomla Templates Club 406,261 posts

[testcouch Friend testcouchJoin date: October 2013Posts: 155Downloads:0Uploads:45 Thanks: 30 Thanked: 9 times in 1 posts]

#195669

hi, i’m little confused about JA Social/T3 Framework Module Position Options! i’m able to hide some and other not in Layout Settings-Template Manager. i’ts a bit confusing why i’m not able to hide all Positions for certain Responsive Layouts!?

Example:

1. ja-topbar
2. Monday, 03 10th Last update
3. t3-header with Logo Area

[Nazario A Friend Nazario AJoin date: April 2013Posts: 1183Downloads:0Uploads:406 Thanks: 91 Thanked: 284 times in 263 posts]

#526241

@testcouch,

You can try to hide the module using CSS as follows.

Create a new file called “custom.css” in the /templates/ja_social_t3/css/ path, then add custom CSS rule based on class suffix. For instance, if you want to hide the logo on iPad, add this rule:

@media(min-width: 768px) and (max-width: 1024px) {
.span8.logo.logo-image {
display: none;
}
}

* @media(min-width: 768px) and (max-width: 1024px): the width of iPad (vertical and horizontal)

Let me know if this helps.

[testcouch Friend testcouchJoin date: October 2013Posts: 155Downloads:0Uploads:45 Thanks: 30 Thanked: 9 times in 1 posts]

#526379

@ Nazario A

thanks for your explanation and the iPhone example for custom.css

but i still think it’s not realy comfortable to hide for example -> ja-topbar (within block header) with a costum.css :((

on my PC is ja-topbar showed but not on Mobile iPhone..and i don’t know why!? 😉

[Nazario A Friend Nazario AJoin date: April 2013Posts: 1183Downloads:0Uploads:406 Thanks: 91 Thanked: 284 times in 263 posts]

#526908

@testcouch,

Do you want your site on iphone as this image?

Please open the /templates/your_template_name/css/custom.css file, then add this rule:
@media (min-width: 320px) and (max-width: 480px) {
.ja-headtools {
top: -38px;
}
}

Let me know if this helps.

---

Attachments:

1. 

1 user says Thank You to Nazario A for this useful post

1. testcouch

[testcouch Friend testcouchJoin date: October 2013Posts: 155Downloads:0Uploads:45 Thanks: 30 Thanked: 9 times in 1 posts]

#527048

hi Nazario A,

thanks for your help..ja login is now showed on iPhone vertical view, but not showed inside nav in horizontal view. maybe we must change the max-width?
—————————————————————————————————————————————

can you please add here also other css mobile width for respective T3 Layouts because in Template -> Responsive Layout is no explanation about Mobile, Tablet, XTablet, Normal and Wide

1. iPhone (Mobile) @media (min-width: 320px) and (max-width: 480px) the width of iPhone (vertical and horizontal)

2. iPad (Tablet or XTablet?) @media(min-width: 768px) and (max-width: 1024px) the width of iPad (vertical and horizontal)

3.

…

[Nazario A Friend Nazario AJoin date: April 2013Posts: 1183Downloads:0Uploads:406 Thanks: 91 Thanked: 284 times in 263 posts]

#527186

@testcouch,

The issue occurred on the iPhone5? If that is the case, pls replace the code in red as follows:

@media (min-width: 320px) and (max-width: 568px) {
.ja-headtools {
top: -38px;
}
}

<blockquote>…no explanation about Mobile, Tablet, XTablet, Normal and Wide</blockquote>
Please have a look at this article to learn more on the width in accordance with each device screen: http://getbootstrap.com/css/#grid-media-queries

[Author]

Posts