Jump to content
Sign in to follow this  
cybersphere

Font size different when viewed on mobile devices (ie. iPhone)

Recommended Posts

cybersphere

Hi, Due to menu bar getting compressed and appearing over 3 rows and only showing parts of the feature image, I have enabled Pagelines > Layout Editor > 'Disable Mobile View' so that my website will appear exactly the same (at least similar) on both the desktop computer and mobile devices like iPhone. Well, that was the theory. Please have a look at attached screen shot of my site on an iPhone. iphonee.jpg As you can see the text inside the 'blue oval' appears correctly in relation to everything else on the website. However, the text inside the 'red oval' are twice the font size in relation to other text. Both 'blue' and 'red' text appears similar on desktop computer but it varies hugely on mobile device. The site I am working on is: http://justitia.com.au/web (if you wish to compare the difference). I'm not sure if the code responsible for 'Disable Mobile View' will be updated to take this into consideration OR I need to add CSS codes to 'normalise' this odd behaviour but I would appreciate a solution either way. As always, thank you very much for your support! Paul PS. This may be just on my website as I do have CSS codes that sets the font size for the menu and the first paragraph of the page but NOT for the blog post text it self. So, maybe my solution is to set the font size for blog post as well? Not sure! PPS. I am posting my entire CSS code (with notes) for anyone's reference. body{} /* Adjust font size of home page text in widget */ li#text-7 {font-size: 15px;} /* Adjust font size of Post title - Default 2.2em */ .entry-title { font-size: 1.8em;} /* Adjust font size of Feature title - Default 2.2em */ .ftitle { font-size: 2.2em;} /* Adjust font size of Feature Text/Excerpt - Default 1.0em */ /** WARNING TOO LARGE WILL LOOK ODD **/ .fexcerpt { font-size: 1.5em;} /* Adjust font size of Menu text - Default 13px */ .main_nav li a {font-size: 13px;} /* Adjusts spacing between menu text to have more space - Adjust 2nd number*/ .main_nav ul.main-nav li a { padding: 10px 13px; } /* Adjusts gap between the menu and search box*/ .navigation_wrap .main_nav { margin-right: 100px; } /* Adjust width of search box - maintain 30px difference between the two */ .searchform { width: 150px; } .searchform .searchfield { width:120px !important; }

Share this post


Link to post
Share on other sites
cybersphere
BTW, what is the difference between setting the font size in 'px' vs 'em'?

Share this post


Link to post
Share on other sites
catrina
You may want to change some font sizes from pixels to EM since sometimes pixels may not display correctly. Pixels and EM work in different ways on the browser. There are pixel to EM equivalents and EM to pixel equivalents (i.e. 14px is equal to 0.88em and 25px is equal to 1.56em). A more specific description is given here: http://www.astahost.com/info/tdcts-sizes-webdesign.html

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
cybersphere
Hi Catrina, I figured you would know all about px and em. Thanks for posting the link. I have updated all the font sizes from px to em. BUT on iPhone, it still looks very different. [img]http://img526.imageshack.us/img526/6995/iphonee.jpg[/img] Paul

Share this post


Link to post
Share on other sites
Jenny
I would try to set 'p' text in your css and see if that helps. Perhaps make it the same size as the top section text.

Jenny :: Web designer at Simple Mama (follow me at @simplemamacom)

Check out Share Me, a social sharing add-on for DMS that is super simple to set up.

Share this post


Link to post
Share on other sites
Jenny
Also, I suggest adding "!important" to the declaration just in case. :)

Jenny :: Web designer at Simple Mama (follow me at @simplemamacom)

Check out Share Me, a social sharing add-on for DMS that is super simple to set up.

Share this post


Link to post
Share on other sites
cybersphere
What are you doing to me? huh hahahaha. I would love to place 'p' and '!important' Now where shell I place that? Below is my entire Custom CSS collection. body{} /* Adjust font size of home page text in widget */ li#text-7 {font-size: 1.1em;} /* Adjust font size of Post title */ .entry-title { font-size: 1.8em;} /* Adjust font size of Feature title */ .ftitle { font-size: 2.2em;} /* Adjust font size of Feature Text/Excerpt */ .fexcerpt { font-size: 1.5em;} /* Adjust font size of Menu text */ .main_nav li a {font-size: 1.05em;} /* Adjusts spacing between menu text to have more space - Adjust 2nd number*/ .main_nav ul.main-nav li a { padding: 10px 13px; } /* Adjusts gap between the menu and search box*/ .navigation_wrap .main_nav { margin-right: 100px; } /* Adjust width of search box - maintain 30px difference between the two */ .searchform { width: 150px; } .searchform .searchfield { width:120px !important; } /* Adjusts gap between bullet point text */ .hentry li { margin: 0.1em 0; } /* TEST - Adjusts gap above and below blank text lines - TEST*/ p { orphans: 4; } p, .p, .hentry ul, .hentry ol { margin: 0em 0; }

Share this post


Link to post
Share on other sites
Jenny
Get rid of that "orphans" entry. I don't even know what it does. lol You can also get rid of the body{} at the top. Assuming this (/* Adjust font size of home page text in widget */) is the top text on your site, then try something like: Actually.. mid thought. You probably want your bullet-ed text the same size, so just add this, on a new line, after the [i]margin: 0em 0;[/i] line but before the closing [i]}[/i]. [code]font-size: 1.1em;[/code]

Jenny :: Web designer at Simple Mama (follow me at @simplemamacom)

Check out Share Me, a social sharing add-on for DMS that is super simple to set up.

Share this post


Link to post
Share on other sites
cybersphere
No! No!! Bad things happen. The issue I had was just with viewing the page on iPhone. With that code, it increased the font size of blog preview on desktop computer. I have now removed that code on my site. [IMG]http://i.imgur.com/65cy9.jpg[/IMG] Thanks for suggesting. It was worth a shot.

Share this post


Link to post
Share on other sites
Jenny
What browser is this? Have you checked out the plugin for browser specific CSS from the PageLines Store? That would be the best way to solve the issue I think.

Jenny :: Web designer at Simple Mama (follow me at @simplemamacom)

Check out Share Me, a social sharing add-on for DMS that is super simple to set up.

Share this post


Link to post
Share on other sites
cybersphere
I am using Safari. Oh no! More codes... I'm not sure if my WordPress can handle any more codes!! :) Okay... I have now installed and activated the 'Browser Specific CSS' plug-in. It appears it has not broken anything. Everything appears, as it was, before this plug-in was activated. That also means, iPhone view is still not consistent with desktop view. At this point, I would love to install your code you suggested earlier: font-size: 1.1em; But now that your code looks like this: /* Adjusts gap between bullet point text */ .hentry li { margin: 0.1em 0 !important; } /* Adjusts gap above and below blank text lines */ p, .p, .hentry ul, .hentry ol { margin: 0 !important; } /* Adjusts gap above and to the left of bulelts */ .hentry ul, .hentry ol { margin: 20px 0 0 17px !important; } So I have not attempted that bit. Paul

Share this post


Link to post
Share on other sites
Jenny
Did a little google searching and pieced some things together. I really hope this works.. lol. Try putting this in to the browser specific css file. [code]/*------------IPHONE-------------*/ @media screen and (max-device-width: 480px){ /*--- iPhone only CSS here ---*/ body{ -webkit-text-size-adjust:none; font-family:Helvetica, Arial, Verdana, sans-serif; padding:5px; } p, .p { font-size: 1.1em; } }[/code] I'm heading out now and won't be back until Sunday evening so if that doesn't help, hopefully someone else can assist you or I can try again tomorrow. :)

Jenny :: Web designer at Simple Mama (follow me at @simplemamacom)

Check out Share Me, a social sharing add-on for DMS that is super simple to set up.

Share this post


Link to post
Share on other sites
Jenny
Also, noticed an issue with the code above that you pasted. Please replace it with this: [code]/* Adjusts gap between bullet point text */ .hentry li { margin: 0.1em 0 !important; } /* Adjusts gap above and below blank text lines */ p, .p { margin: 0 !important; } /* Adjusts gap above and to the left of bullets */ .hentry ul, .hentry ol { margin: 20px 0 0 17px !important; }[/code]

Jenny :: Web designer at Simple Mama (follow me at @simplemamacom)

Check out Share Me, a social sharing add-on for DMS that is super simple to set up.

Share this post


Link to post
Share on other sites
cybersphere
I am away from my desktop so I will try later. Thank you!

Share this post


Link to post
Share on other sites
cybersphere
@catrina @simple_mama - Okay... I have replaced the 'faulty' Custom CSS code I had with Simple_mama's CSS Code. I am now looking at simple_mama's 'iPhone' code but I don't know where "Browser specific CSS" is, so that I can paste this code. I'm assuming it is not: WP-Admin > Plug-ins > Browser Specific CSS > [Edit]? That would be the browser-css.php.

Share this post


Link to post
Share on other sites
Simon
The browser css plugin adds a new body class to each page for each browser inside so for firefox you can now add .firefox chrome is .chrome iphone is .iphone

Share this post


Link to post
Share on other sites
cybersphere
@pross - Thanks Simon but I don't know where to place the "Browser Specific CSS code"? Jenny provided me with the below code but it has no home to go to. :( Try putting this in to the browser specific css file. /*------------IPHONE-------------*/ @media screen and (max-device-width: 480px){ /*--- iPhone only CSS here ---*/ body{ -webkit-text-size-adjust:none; font-family:Helvetica, Arial, Verdana, sans-serif; padding:5px; } p, .p { font-size: 1.1em; } }

Share this post


Link to post
Share on other sites
Jenny
Ok I've been messing around with this for the last 50 minutes or so and can't get any iphone changes to take effect, so I am assuming that either the iphone portion of the plugin has a bug, or the entire plugin does (I have no way of knowing). What I learned from pross was that you add iphone as a class like .iphone. So what you should need to use is: [code]p .iphone, .p .iphone { font-size: 1.1em; }[/code] ...but it doesn't work. Until I can find out more information, I have another suggestion. Visit the Layout Editor. If the "Disable Mobile View" box is unchecked, check it (and save). If it is checked, uncheck it (and save). Then view your page. My page changed completely and actually looks better with it checked (which is how I will be leaving it). Let me know if that helps!

Jenny :: Web designer at Simple Mama (follow me at @simplemamacom)

Check out Share Me, a social sharing add-on for DMS that is super simple to set up.

Share this post


Link to post
Share on other sites
cybersphere
Hi Jenny, Thanks again for taking an hour of your time trying to get to the bottom of this. I don't like the default 'Mobile View'... it squashed my menu bar over 3 rows and image in 'Feature' only shows portion of it. Essentially, for what I want to achieve, mobile view is not appropriate. As for getting the font size to appear consistently across the home/blog page... I guess I will just wait for the patch to be released. Thanks again for your time! Paul

Share this post


Link to post
Share on other sites
kastelic
Try doing it like this: [code] .iphone p{ font-size: 1.1em; } [/code]

Share this post


Link to post
Share on other sites
cybersphere
@Kastelic - do I place that code in the usual Pagelines > Custom Codes or somewhere else designed specifically for iPhone CSS codes?

Share this post


Link to post
Share on other sites
cybersphere
@Kastelic - Thanks for that info. Yes, your CSS did help me set the font size when viewed on iPhone. I wonder if you can assist me with two other areas? Please see the screen shot below from my iPhone. 1/ I would like to reduce the paragraph spacing (marked with red box). 2/ Also reduce the font size of categories (marked with blue oval). [IMG]http://i.imgur.com/6EgI6.jpg[/IMG] Thank you! Paul

Share this post


Link to post
Share on other sites
cybersphere
I did figure out the iPhone CSS for line height. Here is the iPhone specific CSS code that worked for me. /* Set font size for iPhone */ .iphone p{ font-size: 0.55em; line-height: 1.6em; } I am however unable to figure out CSS code to reduce the CATEGORY font size (appears above in BLUE circle).

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  

×