Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    Regular Coder
    Join Date
    Oct 2009
    Posts
    434
    Thanks
    7
    Thanked 3 Times in 3 Posts

    why would text on pc view be smaller than that on a mobile device view

    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
    Code:
    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.css
    Code:
    div { 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
    Code:
    <!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>

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,955
    Thanks
    9
    Thanked 726 Times in 720 Posts
    I'm not seeing an issue on an iPhone or on Android?
    Use the W3C HTML Validator and CSS Validator to check your code and Firebug to see what css is applied to an element
    Read Steve Krug's book Don't Make Me Think - essential reading on web usability
    I don't recommend much, but I do recommend Clook for UK web hosting

  • #3
    Regular Coder
    Join Date
    Oct 2009
    Posts
    434
    Thanks
    7
    Thanked 3 Times in 3 Posts
    on a pc the 'blah blah' text seems ok, but viewing it on a windows phone for example the 'blah blah' text is shown more than twice the size.

  • #4
    Regular Coder
    Join Date
    Oct 2009
    Posts
    434
    Thanks
    7
    Thanked 3 Times in 3 Posts
    just checked with a friends blackberry, seems to show ok there now, but still not right with a windows phone nokia.

  • #5
    Regular Coder
    Join Date
    Oct 2009
    Posts
    434
    Thanks
    7
    Thanked 3 Times in 3 Posts
    ok googling around i found this...
    Code:
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">
    This seems to have fixed it but now the page seems to zoom in so the top left logo shows in view first and i have to zoom out a lot to view the rest of the page. where before it loaded the whole page in view. (thats when viewed in portrait view)

    how can i get it to load the page all in view like before, of course unless the page is so long that it can only show part of it.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •