ROCKETTHEME IS CLOSING ON JUNE 30, 2025. As a thank-you to our community, enjoy 50% off all themes with the promo code THANKYOU before we shut down.
Read our Farewell Blog Post for more details.
SOLVED iPad / iPhone styling problems
-
-
- Luke Douglas
- Hero Rocketeer
- Posts: 322
- Thanks: 15
- Another Old Hack!
-
I'm having issues with a couple of styling problems on iPads and iPhones.
The website is http://rleelawfirm.com
I cannot get the phone number to display in the dark red color code.
Here is the code I have in gantry-iphone.css:
.title, h1, h2, h3, h4, h5, h6 { font-family: 'Droid Serif', Georgia, 'Times New Roman', serif !important; box-shadow: 0 0px 0 #330000; color: #7C1A09 !important; text-shadow: 0px 1px 2px #cccccc; border-bottom: 0px solid #D1D1D1; }
Here is a screenshot from an iPad:
This image is hidden for guests.
Please log in or register to see it.
Also, on the 'Send Message' button below the contact form in the "rt-sidebar-a" on the left side, it is not centered even though it displays fine on non-iPad / non-iPhone displays.
Here is the code:
#rt-sidebar-a #aiContactSafeSendButton { background-color: #F3ECD4; background-image: linear-gradient(to bottom, #E6DEC2, #D5C38E); background-repeat: repeat-x; border: 1px solid #A5976E !important; box-shadow: 0 2px 3px rgba(0, 0, 0, 0.4); color: #2A271C !important; text-shadow: 0 2px 3px #cccccc; border-radius: 5px; width:90% !important; }
Here is the screenshot:
This image is hidden for guests.
Please log in or register to see it.
Regretfully, I don't own either an iPad or an iPhone so my diagnostic options are limited. Anyone have a clue what I can do to correct this issues?
Thanks! - Just another old hacker!
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13484
- Web Designer/Developer
-
hmmm, what's gantry-iphone.css ? how are you loading this (you're not btw).
you should be putting all your CSS changes in gantry-custom.css if you only wan them to apply to phones and tablets then you should be putting that CSS inside media queries (which only detect viewport size not actual device).
/* Smartphones */ @media (max-width: 480px) { } /* Smartphones to Tablets */ @media (min-width: 481px) and (max-width: 767px) { } /* Tablets */ @media (min-width: 768px) and (max-width: 959px) { } /* Desktop */ @media (min-width: 960px) and (max-width: 1199px) { } /* Large Display */ @media (min-width: 1200px) { }
Regards, Mark. - Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
-
-
- Luke Douglas
- Hero Rocketeer
- Posts: 322
- Thanks: 15
- Another Old Hack!
-
MrT,
Yep. It's not loading so I modified the 'gantry-custom.css' file using '@media' queries. However, is there any type of 'CSS' code that can be used to 'isolate' styling strictly for iPhones and iPads other than media queries? - Just another old hacker!
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13484
- Web Designer/Developer
-
I think styling for physical devices is a slippery slope that you should not go down. We deliverately avoided styling for physical devices because there are just too many on the market nowadays - that's why we elected to keep the styling change purely based upon viewport size.
However, it can be done in php (in the template index.php file) where you can use the detection to load a CSS stylesheet of your choosing or add a class to the body tag that would enable specific styling selection for a device - but this is a change that you would have to do on you own. Here's tha basic information that you would need.
or<?php gantry_import('core.utilities.gantrymobiledetect'); ?> <?php $detector = new GantryMobileDetect(); ?> <?php if ($detector->isTablet()) : ?> test <?php endif; ?>more info<?php gantry_import('core.utilities.gantrymobiledetect'); ?> <?php $detector = new GantryMobileDetect(); ?> <?php if ($detector->isMobile()) : ?> <?php header('Location: mobile.site.com/ '); ?> <?php endif; ?>
github.com/serbanghita/Mobile-Detect/wiki
checks for
Supported methods
Basic detection methods
isMobile() bool(false)
isTablet() bool(false)
Custom detection methods
isiPhone() bool(false)
isBlackBerry() bool(false)
isHTC() bool(false)
isNexus() bool(false)
isDell() bool(false)
isMotorola() bool(false)
isSamsung() bool(false)
isSony() bool(false)
isAsus() bool(false)
isPalm() bool(false)
isVertu() bool(false)
isPantech() bool(false)
isFly() bool(false)
isGenericPhone() bool(false)
isBlackBerryTablet() bool(false)
isiPad() bool(false)
isNexusTablet() bool(false)
isKindle() bool(false)
isSamsungTablet() bool(false)
isHTCtablet() bool(false)
isMotorolaTablet() bool(false)
isAsusTablet() bool(false)
isNookTablet() bool(false)
isAcerTablet() bool(false)
isToshibaTablet() bool(false)
isYarvikTablet() bool(false)
isMedionTablet() bool(false)
isArnovaTablet() bool(false)
isArchosTablet() bool(false)
isAinolTablet() bool(false)
isSonyTablet() bool(false)
isCubeTablet() bool(false)
isCobyTablet() bool(false)
isSMiTTablet() bool(false)
isRockChipTablet() bool(false)
isTelstraTablet() bool(false)
isFlyTablet() bool(false)
isbqTablet() bool(false)
isHuaweiTablet() bool(false)
isGenericTablet() bool(false)
isAndroidOS() bool(false)
isBlackBerryOS() bool(false)
isPalmOS() bool(false)
isSymbianOS() bool(false)
isWindowsMobileOS() bool(false)
isWindowsPhoneOS() bool(false)
isiOS() bool(false)
isFlashLiteOS() NULL
isMeeGoOS() bool(false)
isMaemoOS() bool(false)
isJavaOS() bool(false)
iswebOS() bool(false)
isbadaOS() bool(false)
isBREWOS() bool(false)
isChrome() bool(false)
isDolfin() bool(false)
isOpera() bool(false)
isSkyfire() bool(false)
isIE() bool(false)
isFirefox() bool(false)
isBolt() bool(false)
isTeaShark() bool(false)
isBlazer() bool(false)
isSafari() bool(false)
isTizen() bool(false)
isUCBrowser() bool(false)
isDiigoBrowser() bool(false)
isPuffin() bool(false)
isGenericBrowser() bool(false)
Experimental version() method
version(Version) float(6.02)
version(Safari) float(6.02)
version(Webkit) float(536.2617)
version(Gecko) int(0)
Other tests
isiphone() bool(false)
isIphone() bool(false)
istablet() bool(false)
isIOS() bool(false)
isWhateverYouWant() bool(false)
Regards, Mark. - Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
-
-
- Luke Douglas
- Hero Rocketeer
- Posts: 322
- Thanks: 15
- Another Old Hack!
-
Thanks for this detailed reply. Now I know what why I like Gantry!
If I can't get the styling exactly like I want for a particular area using the default custom CSS, I'll use images. That's what I did on this one site and it worked just fine on the iPad and iPhone.
- Just another old hacker!
-
Time to create page: 0.083 seconds