jason310771 Posted May 22, 2013 Share Posted May 22, 2013 I have been bashing my head all night and still can not figure this one out, I have removed all the font and other sizing code and still the header text is very much larger on a mobile device than that on the pc view. Everything else about the page seems perfect apart from the text. What can I be missing that is causing this to be bigger on the mobile?style3.css body { text-decoration: none; background-color: #8C8C8C; margin: 0; padding: 18px; } h1, h2, h3, h4, h5, h6 { margin: 0em 0em; font-size: 1.5em; } a, a:visited { text-decoration:underline; } a:hover { text-decoration:none; } h1 { color: #164365; } img { border: 0px; } .floatleft: { float: left; } .clear { clear:both; } #main { width:822px; margin:auto; } /* 739px + 83 */ #main-inner { padding:0 17px 5px 17px; border: 0px solid red; min-height:200px; background-color: #FFFFFF; background-image: url(../images/bg-main-bottom-822.....gif); background-repeat: no-repeat; background-position: center bottom; } #main-inner-left { border: 0px solid red; width: 650px; border-right:1px solid #C8C8C8; display:block; float:left; } #main-inner-right { width: 130px; display:block; border: 0px solid red; float:right; text-align:right; padding-top:10px; } #main-inner-right p { color:#164365; padding-right:0px; } #logo { width:822px; background-color:#310101; background-image: url(../images/bg-logo-top-822-burg.....gif); background-repeat: no-repeat; background-position: center top; border-bottom:0px solid #C8C8C8; border-bottom:1px solid #C8C8C8; } #belowMenu { height: 162px; background-color: #FFFFFF; border-bottom:1px solid #C8C8C8; padding:3px 0 3px 0; } div#navbar2 { padding-left: 1px; padding-top:10px; } div#navbar2 ul { margin: 0px; padding: 0px; color: #6F6F6F; white-space: nowrap; } div#navbar2 li { list-style-type: none; display: inline; } div#navbar2 li a { text-decoration: none; padding: 0 4px 0 4px; margin: 0px 1px 0px 1px; color: #0033CC; display:inline; float:left; width:72px; height:22px; background-image: url(../images/bg-button.gif); background-repeat: no-repeat; text-align:center; line-height:22px; } div#navbar2 li a:link { color: #0033CC; } div#navbar2 li a:visited { color: #0033CC; } div#navbar2 li a:hover { color: #6F6F6F; text-decoration:underline; } #footer { margin: 0 auto; clear: both; color:#FFFFFF; text-align: center; padding: 12px; line-height: 18px; width: 810px; } /* 727 */ #footer a:link, #footer a:visited { color: #FFFFFF; text-decoration: none; } #footer a:hover { color: #FFFFFF; text-decoration: underline; } .highlight { padding: 0px; margin: 0px 0px 0px 0px; color: #164365; text-decoration: none; } .highlight a, .highlight a:visited { color: #164365; text-decoration: none; text-indent: 0px; } .highlight a:hover { color: #6F6F6F; text-decoration: underline; text-indent: 0px; } .error{ color: #F00; } .success { color: green; } ul{ list-style: none; } .formField { margin: 5px 5px 3px; font-style: italic; } .formValue { margin: 0 10px 10px; } .formSubmit { margin: 10px 0 0 10px; padding: 0em; } styles3.cssdiv { padding: 0em; margin: 0em; } hr.smallDivider { color: #EDB6B6; height: 0.063em; } /* brown = #A52A2A */ hr.smallDividerTwo { color: #EEEEEE; height: 0.063em; } /* brown = #A52A2A */ .itemDivider { height: 0.063em; border-top: 0.063em dashed #D5D5D5; } .indent { padding-left: 25em; } .center { text-align: center; } .wordwrap { white-space: pre-wrap; /* CSS3 */ white-space: -moz-pre-wrap; /* Firefox */ white-space: -pre-wrap; /* Opera <7 */ white-space: -o-pre-wrap; /* Opera 7 */ word-wrap: break-word; /* IE */ } .pageNumber a:link, .pageNumber a:visited, .pageNumber a:active { color: #ddd; } .pageNumber a:hover { color: #222; } html<!DOCTYPE html> <html> <head> <title>Home - - </title> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <meta name="keywords" content=""> <meta name="description" content=""> <link href="style3.css" rel="stylesheet" type="text/css"> <link href="styles3.css" rel="stylesheet" type="text/css"> <meta name="ROBOTS" content="INDEX, FOLLOW"> </head> <body> <div id="main"> <div id="logo"> <div style="float:left; padding-top: 12px; padding-left: 1em; border: 0px solid red;"> <a href="index.php"><img height="83" src="../images/300w-150h.gif" alt="" style="display:block; float:left;"></a> </div> <div style="float:right; width: 530px; /*font-size: 1em;*/ text-align: justify; padding-top: 10px; padding-right: 1em; border: 0px solid orange; color: #bd832b;"> blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah </div> <div class="clear"></div> <div id="navbar2"> <ul> <li><a href="../0.php">0</a></li> <li><a href="../0.php">0</a></li> <li><a href="../0.php">0</a></li> </ul> </div> <div class="clear"></div> </div> <div class="clear"></div> <div id="main-inner"> <div id="main-inner-left"> <h1>Home</h1> </div> <div id="main-inner-right"><img style="margin-bottom: 20px;" width="0" src="../images/0.jpg" alt=""><br> <p class="highlight"><img style="vertical-align: middle;" src="../images/arrow-on-white.gif" alt="Email Contact"><a href="../contact.php">Email Contact</a></p> <br><br><br> <p style="">.</p> </div> <div class="clear"></div> </div> <div class="clear"></div> </div> </body> </html> Quote Link to comment https://forums.phpfreaks.com/topic/278265-why-would-text-on-pc-view-be-smaller-than-that-on-a-mobile-device-view/ Share on other sites More sharing options...
White_Lily Posted June 18, 2013 Share Posted June 18, 2013 (edited) I wondered this to, what fixed it for me though was that I hadn't set the text to be a specific size. for example: the browser default for p tags is 12px, taking this i could just write my css like this p{ display: block; color: #333333; text-align: left; font-weight: normal; margin: 0; padding: 5px 0 0; } pc browser will render this as its default of 12px. whereas mobile will render it as its default of 19px. to stop this, simply specify the font-size. eg: p{ font-size: 12px; } However when Edited June 18, 2013 by White_Lily Quote Link to comment https://forums.phpfreaks.com/topic/278265-why-would-text-on-pc-view-be-smaller-than-that-on-a-mobile-device-view/#findComment-1436553 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.