Public Forums 71,145 posts

[stix Friend stixJoin date: April 2012Posts: 76Downloads:0Uploads:1 Thanks: 9 Thanked: 7 times in 1 posts]

#185910

Hi guys

I have a component css class that need mobile css fixes
as such i need to add the media screen css suffix to that single css.

i assume if i use the below code it should able to detect mobile size as per normal.?

@media=”only screen and (max-width:719px)
@media=”only screen and (max-width:479px) etc..

i dont want to add the classes to the three different files as in

layout-mobile.css
layout-tablet.css etc.

Please guide. thanks

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

#486836

Hi stix,

“If i use the below code it should able to detect mobile size as per normal.?”. Yes. But you need to put your modified component css classes to layout-mobile.css which will be called for mobile view.

Regards,
—
Leo

[stix Friend stixJoin date: April 2012Posts: 76Downloads:0Uploads:1 Thanks: 9 Thanked: 7 times in 1 posts]

#489393

Hi Leo

“modified component css classes to layout-mobile.css”

i dont understand this part.
meaning i need to import the css that i use for component into layout-mobile.css?

thanks

I have a question on module too.

only to display on mobile.

How do i achieve this?

thanks!

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

#489396

Hi stix,

For JA templates(i.e JA Mixmaz) run on T3v2 framework, the mobile layout is defined in templatesja_templateetclayoutsdefault.xml at lines

<stylesheets>
<file>css/layout.css</file>
<file>css/template.css</file>
<file media="only screen and (max-width:719px)">css/layout-mobile.css</file>
<file media="only screen and (max-width:479px)">css/layout-mobile-port.css</file>
<file media="only screen and (min-width:720px) and (max-width: 985px)">css/layout-tablet.css</file>
</stylesheets>

>> If you want to apply css styles on mobile view, you absolutely put these css codes to layout-mobile.css, layout-mobile-port.css, layout-tablet.css.

* You DON’T need to add

@media="only screen and (max-width:719px) @media="only screen and (max-width:479px) etc..
to detect mobile size.

Forwarding to your 2nd concern: “only to display on mobile – How do i achieve this?”
>>
1. You need to assign those modules to a menu item.
2. Then create a specific profile (Template Manager >> JA_Template_default >> Profile >> New) which you disable Desktop Layout in. And assign this profile to menu item in step 1.

Regards,
—
Leo

---

Attachments:

1. 

1 user says Thank You to phong nam for this useful post

1. stix

[stix Friend stixJoin date: April 2012Posts: 76Downloads:0Uploads:1 Thanks: 9 Thanked: 7 times in 1 posts]

#489450

Thanks Leo

It seems like a long process and not one time work,

Is there any css classed that can be added to display for mobile only etc?
just like the bootstrap.
Is it possible to integrate the bootstrap framework in to t3v2 base templates? is it advicable?

thanks

[stix Friend stixJoin date: April 2012Posts: 76Downloads:0Uploads:1 Thanks: 9 Thanked: 7 times in 1 posts]

#489459

Hi Leo

is there any way can add bootstrap into t3v2 ?
that will solve all the problem i guess

im looking at it. it has some awesome features.

thanks!

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

#489616

Hi stix,

Currently, our T3v2 framework doesn’t support Bootstrap framework, so you can not insert Bootstrap codes into T3v2 templates.

Only from JA Brisk template to new JA Fubix template are on T3v3 framework which supports Bootstrap.

Regards,
—
Leo

[stix Friend stixJoin date: April 2012Posts: 76Downloads:0Uploads:1 Thanks: 9 Thanked: 7 times in 1 posts]

#489800

Hi Leo

i understand that part.

what i mean is bootstrap able to be install in any j! template.
is joomlart template from t3v2 compatible i mean, i am not sure what are the code changed in t3v2 that make it unable to install bootstrap in to existing template.

thanks

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

#489845

Hi stix,

“is joomlart template from t3v2 compatible i mean, i am not sure what are the code changed in t3v2 that make it unable to install bootstrap in to existing template”

>> T3v3 framework comes with Bootstrap integration, It is the core difference between our T3v2 & T3v3 framework.
We will upgrade our other JA template to work with T3v3 in near future.

Regards,
—
Leo

[stix Friend stixJoin date: April 2012Posts: 76Downloads:0Uploads:1 Thanks: 9 Thanked: 7 times in 1 posts]

#490149

Hi

I understand that if i choose iphone.xml as the layout ill get the ugly blue icon style design.
i did not want this at all.

so my solution would be renaming the default.xml to maybe

default_desktop for desktop and
default_mobile for mobile views?

then ill add my custom module code to the default_mobile xml.

is that solution sound logic?

im using ja uni template .

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

#490196

Hi Stix,

Your solution is good, but I think you can consider my opinion here. If you are using Default profile for your homepage, you can set Desktop layout for mobile view in Layout settings (Template Manager >> JA template style >> Profiles tab >> Default.)

Regards,
—
Leo

1 user says Thank You to phong nam for this useful post

1. stix

[stix Friend stixJoin date: April 2012Posts: 76Downloads:0Uploads:1 Thanks: 9 Thanked: 7 times in 1 posts]

#490224

hi

“Desktop layout for mobile view ” this will confuse the site visitors cause i am having the cpanel to change view manually.

thanks

[stix Friend stixJoin date: April 2012Posts: 76Downloads:0Uploads:1 Thanks: 9 Thanked: 7 times in 1 posts]

#490226

i seeing this

<file media=”only screen and (max-width:719px)”>css/layout-mobile.css</file>
<file media=”only screen and (max-width:479px)”>css/layout-mobile-port.css</file>
<file media=”only screen and (min-width:720px) and (max-width: 985px)”>css/layout-tablet.css</file>

can i add more for my own use?
is this file linked anywhere to conflict?

i have another set of visitor using table 480*640
what css should i use?

layout-mobile work on many cases not flexible enough.i need to create a separate one for 480×640?

thanks

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

#490285

Hi stex,

If you device view has 480×640 px, the template will render layout-mobile-port.css yet. Because you can seen above:

<file media="only screen and (max-width:479px)">css/layout-mobile-port.css</file
So, you should apply your css customizations into layout-mobile-port.css.

Regards,
—
Leo

[stix Friend stixJoin date: April 2012Posts: 76Downloads:0Uploads:1 Thanks: 9 Thanked: 7 times in 1 posts]

#490306

Hi.

i know this of course. my concern is the clash with Iphone layout.
as you can see 0- 479px is under one single css and it include iphone.

thanks

[Author]

Posts