Target mobile page through CSS
-
-
- Charlie B
- Jr. Rocketeer
- Posts: 30
- Thanks: 0
-
I have a site that is built custom off of Gantry but there are still a few things I'd like to clean up on the mobile version, the biggest of which is the mobile navigation menu is picking up a border-radius from somewhere.
How can I target just the mobile browser (Or is this even possible?) through my CSS?
If it helps, I am trying to target the Android OS.
For example I think I would do something like:html .rt-android #rt-navigation { border-radius: none; }
but I have tried .android, .rt-android, #android, .mobile, #mobile, and .rt-mobile and none of them work. Hoping someone will tell me the correct code, so I know if I am not targeting the right element via CSS or if the code just isn't being applied.
Thank you!
-
-
-
- Cliff Pfeifer
- Preeminent Rocketeer
- Posts: 8444
- Thanks: 20
- Website Developer
-
Hi, it doesn't work like that. You can create a separate style sheet that only the android reads, there may already one for the iPhone in your css folder - iphone-gantry.css - just create a new CSS file called android-gantry.css and put your android specific styles in that file.
More information about how that works can be found here:
http://www.gantry-framework.org/documentation/joomla/advanced/per-browser-specific-control - The difficult we do immediately, the impossible takes a little longer.
-
-
-
- Charlie B
- Jr. Rocketeer
- Posts: 30
- Thanks: 0
-
To let anyone know, it only worked when I did this
style1-android.css
So I'm guessing you would do
style1-iphone.css etc.
Still having trouble grabbing the navigation bar, since rt-menu, and rt-mobile-navigation neither work but I'll have to keep playing with it. Will update as soon as I find anything else. 1pg of documentation on something like this doesn't suffice, and it also as far as I can tell, is incorrect since it says to use "template-android.css" which does not work.
-
-
-
- Cliff Pfeifer
- Preeminent Rocketeer
- Posts: 8444
- Thanks: 20
- Website Developer
- Hi, what I'm noticing on our templates that have built in Android support, there is an index-android.php file in the root of the template directory. In this file you can specify which style sheet loads for the android. You might want to take a look at this, copy the files, you could technically add all of the android features from one of our templates into a gantry template. It might take some time, but it probably isn't that difficult. I don't have an Android so I've never tried.
- The difficult we do immediately, the impossible takes a little longer.
-
Time to create page: 0.059 seconds