Create different styling for mobile and for different widths

gustavo
Topic Author
Offline
New Member

10 years 11 months ago #43283 by gustavo

Create different styling for mobile and for different widths was created by gustavo

Hi I'm real new with FlexiContent, but I have a friend that have a website build with joomla and flexicontent, and he have to templates one for jobs and one for course, I'm trying to build an app which take this pages an put them in an url window of my app, doing this there is no problem, but I want to apply some css (media query) but this affect as well if the customers access from the phone, but I thought to duplicate the page with a different URL an apply the css to this page and not the other I duplicate the template but I not able to get it to work, I will attach some photos showing the categories and the templates, so I been looking in the internet but I don't find any way of doing it.

The help will be much appreciated.
Thanks in advanced.

Attachments:

Please Log in or Create an account to join the conversation.

ggppdk
Offline
Administrator

10 years 11 months ago #43296 by ggppdk

Replied by ggppdk on topic Create different styling for mobile and for different widths

Hello

-- you want to load a different CSS when your site is accessed by mobile clients ?

1. you may enable USAGE of mobile layouts in FLEXIcontent Component configuration (this will allow you to select to 2 templates for your categories and content types, 1 for desktop and 1 for mobile)

2. BUT preferably,
a more flexible way would be to use CSS rules like:

Code:

/* Large desktop */
@media (min-width: 1200px) {
 ... your CSS rules
}

/* Medium desktop */
@media only screen and (min-width: 960px) and (max-width: 1199px) {
 ... your CSS rules
}

/* Small desktop */
@media only screen and (min-width: 480px) and (max-width: 956px) {
 ... your CSS rules
}

/* Very small desktop */
@media only screen and (max-width: 480px) {
 ... your CSS rules
}

Regards

-- Flexicontent is Free but involves a big effort on our part.
Like the our support? (for a bug-free FC, despite having a long list of functions) Like the features? Like the ongoing development and future commitment to FLEXIcontent?
-- Add your voice to the FLEXIcontent JED listing with a 5-star...

Please Log in or Create an account to join the conversation.