Jump to content

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

jason310771

By jason310771
in CSS Help

 Share

Recommended Posts

jason310771 Member

jason310771

Posted
Posted

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.css
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
<!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>

 

Link to comment
Share on other sites
  • 4 weeks later...
White_Lily Regular Member

White_Lily

Posted
Posted (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 by White_Lily
Link to comment
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.