Jump to content
Sign in to follow this  
jasoncoburn

feature section headings displaced on ios / mobile

Recommended Posts

jasoncoburn
http://www.partnerafrica.org Hi, i've made some customizations to how the features section categories? (the green bars) are displayed on my site, however they are now displaying oddly when viewed on ipad / iphone and presumably other mobile devices. They appear too big and space out over two rows as opposed to sitting flush with the underside of the feature box. The site displays correctly when viewed on a computer. Is this a standard issue with platformpro or a result of something i have done? Any ideas of solutions? Thanks!

Share this post


Link to post
Share on other sites
jasoncoburn
http://www.partnerafrica.org/wp-content/uploads/2011/10/photo.jpg Here's a screenshot of how it displays on ios. The problem might be related to the text as its displaying quite large inside the feature box too?

Share this post


Link to post
Share on other sites
catrina
[quote]Hi, i've made some customizations to how the features section categories (the green bars) are[/quote] What CSS did you use to create these customizations?

Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
jasoncoburn
Hi Catrina, Here's all the custom css I used relating to the feature section. /* Feature nav (green boxes beneath feature): left spacing, top spacing, colour, and colour of overall border and box*/ #feature-footer .feature-footer-pad { border-left: 32px solid #FFFFFF; border-top: 0 solid #FFFFFF; } #feature-footer { border-color: #FFFFFF; background: none repeat scroll 0 0 #FFFFFF; text-shadow: 0 0 0 #FFFFFF; } #featurenav a.activeSlide { -moz-border-bottom-colors: none; -moz-border-image: none; -moz-border-left-colors: none; -moz-border-right-colors: none; -moz-border-top-colors: none; border-bottom: 1px solid #7ec444; border-left: 1px solid #7ec444; border-top: 8px solid #7ec444; border-color: #7EC444; background: none repeat scroll 0 0 #7EC444; } #featurenav a { -moz-border-bottom-colors: none; -moz-border-image: none; -moz-border-left-colors: none; -moz-border-right-colors: none; -moz-border-top-colors: none; border-bottom: 1px solid #f1f1f1; border-left: 1px solid #f1f1f1; border-top: 8px solid #f1f1f1; } /* Feature navigation text colour*/ #featurenav a.activeSlide, .content-pagination a:hover .cp-num { color: #FFFFFF; } /* Feature navigation spacing between tabs and right border colour */ #featurenav a, #feature-footer span.playpause { margin-right: 15px; border-top-color: #F1F1F1; border-left-color: #F1F1F1; border-color: #F1F1F1; } /* Feature slider MORE button*/ a.pagelines-blink.black-blink .pagelines-blink-pad, #feature_slider .fcontent a.post-edit-link { border-left: 0 solid #444444; border-top: 0 solid #444444; -moz-border-bottom-colors: none; -moz-border-image: none; -moz-border-left-colors: none; -moz-border-right-colors: none; -moz-border-top-colors: none; border-color: #FFFFFF transparent transparent #FFFFFF; border-right: 0 solid transparent; border-style: solid; border-width: 0; display: block; padding: 1px 4px; } /*Nav section box text align to top*/ #feature_slider .fcontent .dcol-pad { height: 270px; padding: 0 8px; } .fcontent .fheading { margin-bottom: -1em; padding: 0.8em 0; } Thanks!

Share this post


Link to post
Share on other sites
Kate
It could be related to using "px". You could try it with "em" instead, though that's not as exact. Have you checked out how the default theme (un-modified) renders in iOS, etc.? Might help you narrow down the problem.

Share this post


Link to post
Share on other sites
jasoncoburn
Thanks for the feedback so far. Unfortunately i haven't been able to find a satisfactory solution to this issue yet. It occurs on a standard installation without any custom css added, so it must just be an odd behavior of platform pro.

Share this post


Link to post
Share on other sites
Simon
You can target mobile browsers in wordpress with css. [code] add_filter('body_class','extension_browser_body_class'); function extension_browser_body_class($classes) { global $is_lynx, $is_gecko, $is_IE, $is_opera, $is_NS4, $is_safari, $is_chrome, $is_iphone; if($is_lynx) $classes[] = 'lynx'; elseif($is_gecko) $classes[] = 'gecko'; elseif($is_opera) $classes[] = 'opera'; elseif($is_NS4) $classes[] = 'ns4'; elseif($is_safari) $classes[] = 'safari'; elseif($is_chrome) $classes[] = 'chrome'; elseif($is_IE) $classes[] = 'ie'; else $classes[] = 'unknown'; if($is_iphone) $classes[] = 'iphone'; return $classes; } [/code] This filter will add new classes to you page body depending on the browsers used to view the page, so you can add specific css for them like: [code] #feature-footer .feature-footer-pad .iphone { css here for iphone } [/code]

Share this post


Link to post
Share on other sites
jasoncoburn
Hi Pross, I dropped the top code into my functions.php file and the bottom into the pagelines custom code box, but any css i add to it has zero effect. I think this is a step in the right direction though!

Share this post


Link to post
Share on other sites
Rob
You may have to clear your cache to see the changes and they can take a few minutes sometimes to propagate.

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×