HTML page randomly showing gigantic fonts - html

Question

I have a Wordpress website.
Upon visitng the pages for the first time I randomly sometimes get gigantic fontsizes as show in this image. In such cases, pressing F5 and relading the page fixes the problem as show in this second image.
Has anybody got any idea?
Please find below my css:
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td
{
background: transparent;
border: 0;
margin: 0;
padding: 0;
vertical-align: baseline;
font-family: 'Cardo', "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
}
html /****/
{
font-size: 62.5;
}
#comments
{
}
.comment-content p
{
margin-bottom: 15px;
}
body
{
line-height: 1;
}
h1, h2, h3, h4, h5, h6
{
clear: both;
font-weight: bold;
}
ol, ul
{
list-style: none;
}
blockquote
{
quotes: none;
}
blockquote:before, blockquote:after
{
content: '';
content: none;
}
del
{
text-decoration: line-through;
}
/*tables still need 'cellspacing="0"' in the markup*/
table
{
border-collapse: collapse;
border-spacing: 0;
margin-bottom: 10px;
}
table td, table th
{
padding: 5px;
}
a img
{
border: none;
}
a, a:visited {
outline: 0;
}
/*=Fonts
--------------------------------------------------------------*/
body, input, textarea, .page-title span, .pingback a.url
{
font-family: 'Cardo', "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
}
h3#comments-title, h3#reply-title, #access .menu, #access div.menu ul, #cancel-comment-reply-link, .form-allowed-tags, #site-info, #site-title, #wp-calendar, .comment-meta, .comment-body tr th, .comment-body thead th, .entry-content label, .entry-content tr th, .entry-content thead th, .entry-meta, .entry-title, .entry-utility, #respond label, .navigation, .page-title, .pingback p, .reply, .widget-title, .wp-caption-text
{
font-family: 'Cardo', "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
}
input[type=submit]
{
font-family: "Helvetica Neue", Arial, Helvetica, "Nimbus Sans L", sans-serif;
}
pre
{
font-family: "Courier 10 Pitch", Courier, monospace;
}
code
{
font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
}
#site-title a
{
font-family: "Arial Black", "Arial Bold", Gadget, sans-serif;
}
#colleft #access a
{
font-family: Geneva, Tahoma, Verdana, sans-serif;
}
.widget-title
{
font-family: "Arial Black", "Arial Bold", Gadget, sans-serif;
}
.entry-title
{
font-family: "Arial Black", "Arial Bold", Gadget, sans-serif;
}
.entry-content
{
font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
}
/*
=Typography
--------------------------------------------------------------*/
.widget-area, #commentform
{
font-size: 14px;
font-size: 1.4rem;
}
.entry-content
{
display: inline-block;
/*color: #BBB;*/
font-size: 14px;
font-size: 1.3rem;
line-height: 26px;
line-height: 1.6rem;
/*font-family:'Cardo', "Century Gothic", CenturyGothic, AppleGothic, sans-serif;*/
margin-bottom: 15px;
}
.entry-content:after
{
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
/* Hides from IE-mac */
* html .entry-content
{height: 1%;}
.entry-content
{display: block;}
/* End hide from IE-mac */
body
{
color: white;/*#CCC;*/
}
#site-title a
{
color: #FFF;
text-decoration: none;
font-size: 20px;
font-size: 2rem;
word-wrap: break-word;
}
#colleft #access a
{
text-transform: uppercase;
font-size: 12px;
font-size: 1.0rem;
font-weight: 600;
color: #FFF;
line-height:1.2rem;
}
#colophon a, #colophon a:visited
{
color: #CCC;
font-size: 14px;
font-size: 1.4rem;
}
#colophon
{
font-family: 'Cardo', serif, "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
font-size: 14px;
font-size: 1.4em;
}
.entry-title
{
font-size: 24px;
font-size: 2.3rem;
color: #EEE;
}
.widget-title, #reply-title
{
color: #777;
font-size: 14px;
font-weight: bold;
}
.form-allowed-tags
{
font-size: 12px;
}
.page-title
{
font-size: 19px;
font-size: 1.9rem;
font-weight: bold;
}
#credits, #credits a {
font-size:12px;
font-size:1.2rem;
font-weight: bold;
}
#site-generator {
}
/*Global styles
----------------------------------------------------------------
Text elements*/
p
{
margin-bottom: 1.625em;
}
ul, ol
{
margin: 0 0 1.625em 2.5em;
}
ul
{
list-style: square;
}
ol
{
list-style-type: decimal;
}
ol ol
{
list-style: upper-alpha;
}
ol ol ol
{
list-style: lower-roman;
}
ol ol ol ol
{
list-style: lower-alpha;
}
ul ul, ol ol, ul ol, ol ul
{
margin-bottom: 0;
}
dl
{
margin: 0 1.625em;
}
dt
{
font-weight: bold;
}
dd
{
margin-bottom: 1.625em;
}
strong
{
font-weight: bold;
}
cite, em, i
{
font-style: italic;
}
blockquote
{
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
font-style: italic;
font-weight: normal;
margin: 0 3em;
}
blockquote em, blockquote i, blockquote cite
{
font-style: normal;
}
blockquote cite
{
color: #666;
font: 12px "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 300;
letter-spacing: 0.05em;
text-transform: uppercase;
}
pre
{
color: #333;
background: #BBB;
font: 13px "Courier 10 Pitch", Courier, monospace;
line-height: 1.5;
margin-bottom: 1.625em;
overflow: auto;
padding: 0.75em 1.625em;
}
code, kbd
{
font: 13px Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
}
abbr, acronym, dfn
{
border-bottom: 1px dotted #666;
cursor: help;
}
address
{
display: block;
margin: 0 0 1.625em;
}
ins
{
background: #FFF9C0;
text-decoration: none;
}
sup, sub
{
font-size: 10px;
font-size: 1.0rem;
height: 0;
line-height: 1;
position: relative;
vertical-align: baseline;
}
sup
{
bottom: 1ex;
}
sub
{
top: 0.5ex;
}
/*Forms*/
input[type=text], input[type=password], textarea
{
background: #EEE;
-moz-box-shadow: inset 0 1px 1px #bbb;
-webkit-box-shadow: inset 0 1px 1px #bbb);
box-shadow: inset 0 1px 1px #BBB;
border: 1px solid #DDD;
color: #888;
}
input[type=text]:focus, textarea:focus
{
color: #373737;
}
textarea
{
padding-left: 3px;
width: 98%;
}
input[type=text]
{
padding: 3px;
}
input#s
{
-moz-border-radius: 2px;
border-radius: 2px;
font-size: 14px;
height: 22px;
line-height: 1.2em;
padding: 4px 10px 4px 28px;
}
input#searchsubmit
{
display: none;
}
a, a:visited
{
color: #FF6347;
}
/*=General Styles
--------------------------------------------------------------*/
.entry-header
{
width: 100%;
display: inline-block;
margin-bottom: 15px;
}
.entry-title
{
border-bottom: 1px solid grey;/*#222;*/
padding-bottom: 10px;
}
#respond p
{
margin-top: 10px;
}
#respond input, #comments #respond textarea
{
margin-top: 5px;
}
#respond
{
color: #444444;
}
.clear
{
clear: both;
}
#site-generator
{
padding-left: 60px;
}
#main
{
display:inline-block;
margin: 40px;
}
/*
#main:after
{
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}*/
/* Hides from IE-mac */
* html #main
{height: 1%;}
#main
{display: block;}
/* End hide from IE-mac */
#image-navigation
{
margin-top: 5px;
}
.page-title
{
margin-bottom: 10px;
}
.entry-content h1, .entry-content h2, .entry-content h3, .entry-content h4, .entry-content h5, .entry-content h6
{
margin-bottom: 20px;
}
.entry-content img
{
outline: 2px solid white;
}
.archive .entry-title
{
margin-top: 20px;
}
.attachment .entry-caption
{
margin-top:10px;
}
#comments-title
{
font-size: 16px;
margin-bottom: 25px;
}
.comment-content
{
font-size: 14px;
line-height: 18px;
color: #AAA;
}
#comments
{
clear: both;
}
#comments .navigation
{
padding: 0 0 18px;
}
h3#comments-title, h3#reply-title
{
color: #999;
font-size: 20px;
font-weight: bold;
margin-bottom: 0;
}
h3#comments-title
{
padding: 24px 0;
}
.commentlist
{
list-style: none;
margin: 0;
}
.commentlist li.comment
{
border-bottom: 1px solid #111;
line-height: 24px;
margin: 0 0 24px;
padding: 0 0 0 65px;
position: relative;
}
.commentlist li:last-child
{
border-bottom: none;
margin-bottom: 0;
}
#comments .comment-body ul, #comments .comment-body ol
{
margin-bottom: 18px;
}
#comments .comment-body p:last-child
{
margin-bottom: 6px;
}
#comments .comment-body blockquote p:last-child
{
margin-bottom: 24px;
}
.commentlist ol
{
list-style: decimal;
}
.commentlist .avatar
{
position: absolute;
top: 4px;
left: 0;
}
.comment-author
{
}
.comment-author cite
{
color: #CCC;
font-style: normal;
font-weight: bold;
}
.comment-author .says
{
font-style: italic;
}
.comment-meta
{
font-size: 12px;
margin: 0 0 13px;
}
.comment-meta a:link, .comment-meta a:visited
{
color: #888;
text-decoration: none;
}
.comment-meta a:active, .comment-meta a:hover
{
color: #FF4B33;
}
.commentlist .even
{
}
.commentlist .bypostauthor
{
}
.reply
{
font-size: 12px;
padding: 0 0 24px;
}
.reply a, a.comment-edit-link
{
color: #888;
}
.reply a:hover, a.comment-edit-link:hover
{
color: #FF4B33;
}
.commentlist .children
{
list-style: none;
margin: 0;
}
.commentlist .children li
{
border: none;
margin: 0;
}
.nopassword, .nocomments
{
display: none;
}
#comments .pingback
{
border-bottom: 1px solid #E7E7E7;
margin-bottom: 18px;
padding-bottom: 18px;
}
.commentlist li.comment + li.pingback
{
margin-top: -6px;
}
#comments .pingback p
{
color: #888;
display: block;
font-size: 12px;
line-height: 18px;
margin: 0;
}
#comments .pingback .url
{
font-size: 13px;
font-style: italic;
}
.entry-meta a
{
color: #EEE;
}
/*=Structure
--------------------------------------------------------------*/
#commentform
{
padding: 10px;
}
#wrapper
{
margin: 0 auto;
width: 1200px;
height: 100%;
}
#colleft
{
width: 230px;
float: left;
margin-right: 50px;
margin-top: 20px;
border-top: 0;
background:rgba(70,70,70,0.90);
border-bottom:1px solid rgba(57,57,57,0.6);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#99464646',endColorstr='#99464646',GradientType=0);
}
#branding h1,#branding h2
{
text-align: center;
text-indent: -9999px;
margin:0;
paading:0;
}
#logo
{
margin-top:0;
height:144px;
background:url('images/Locandina_Logo.jpg') no-repeat center;
background-position:50% 0;
}
#wrapper #colleft a img {
display:block;
margin:auto;
width:100%;
}
.home #page
{
display: none;
}
#page
{
box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0 0 5px rgba(0,0,0,0.4);
-webkit-box-shadow: 0 0 5px rgba(0,0,0,0.4);
border: none;
display: block;
width: 730px;
margin-top: 20px;
float: left;
height:auto;
background:rgba(70,70,70,0.90);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#99464646',endColorstr='#99464646',GradientType=0);
overflow:hidden;
}
#primary
{
/*float: left;*/
width: 80%;
}
#page #main .full-width {
width:100%;
}
#content
{
margin-right:40px;
}
#main .widget-area
{
float: right;
overflow: hidden;
width: 0px;
}
.widget-area
{
color: #999;
}
#colophon
{
box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0 0 5px rgba(0,0,0,0.4);
-webkit-box-shadow: 0 0 5px rgba(0,0,0,0.4);
border-top: 1px solid #222;
clear: both;
display: block;
bottom: 0;
left: 0;
height: 15px;
margin-top: 30px;
position: relative;
}
.home #colophon
{
box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0 0 5px rgba(0,0,0,0.4);
-webkit-box-shadow: 0 0 5px rgba(0,0,0,0.4);
border-top: 1px solid #222;
clear: both;
display: block;
width: 100%;
bottom: 0;
right: 0;
left: 0;
height: 15px;
position: fixed;
}
#content .post
{ display: block;
margin-bottom: 25px;
}
.post .entry-title a, .post .entry-title a:visited
{
text-decoration: none;
color: #EEE;
word-wrap: break-word;
}
.page-template-template-blog-php .page-title {
margin-bottom:20px;
}
/*Increase the size of the content area for templates without sidebars*/
.full-width #content, .image-attachment #content, .error404 #content
{
margin: 0;
}
/*Text meant only for screen readers*/
.screen-reader-text, .assistive-text
{
position: absolute !important;
clip: rect(1px, 1px, 1px, 1px);
/*IE6, IE7*/
clip: rect(1px, 1px, 1px, 1px);
}
/*Alignment*/
.alignleft
{
display: inline;
float: left;
}
.alignright
{
display: inline;
float: right;
}
.aligncenter
{
clear: both;
display: block;
margin-left: auto;
margin-right: auto;
}
/*=Header
--------------------------------------------------------------*/
#site-title
{ text-align: center;
font-size: 2em;
font-weight: bold;
margin: 0.67em 0;
padding:0 5px;
}
#site-description
{
text-align: center;
color: #CCCCCC;
font-size: 12px;
font-weight: normal;
margin: 0 0 1em;
padding:0 5px;
}
/*=Menu
--------------------------------------------------------------*/
#access
{
display: block;
margin: 10px auto;
width: 80%;
}
#access ul
{
list-style: none;
margin: 0;
padding-left: 0;
}
#access li
{
position: relative;
}
#access li a
{
padding: 10px;
}
#access a
{
display: block;
line-height: 15px;
padding: 0 1em;
text-decoration: none;
}
#access ul ul
{
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
-webkit-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
display: none;
float: left;
position: absolute;
top: 0;
left: 100%;
z-index: 99999;
}
#access ul ul ul
{
left: 100%;
top: 0;
}
#access ul ul a
{
width: 10em;
height: auto;
}
#access li:hover > a, #access ul ul :hover > a
{
background: #DEDEDE;
color: #555 !important;
}
#access ul ul a:hover
{
color: #555 !important;
}
#access ul li:hover > ul
{
display: block;
color: #555;
}
#access .menu li a:hover
{
color: #555;
}
#access .children li
{
background-color: #999999 !important;
}
#access .sub-menu li
{
background-color: #999999 !important;
}
.menu
{
text-align: center;
}
.menu li
{
border-top: 1px solid grey;/* #222;*/
}
.menu .sub-menu li
{
border-top: 1px solid #888;
}
.menu .children li
{
border-top: 1px solid #888;
}
.menu li:first-child
{
border: 0;
}
/*=Content
--------------------------------------------------------------*/
.sticky
{
}
.entry-meta
{
color: #ccc;
margin-top: 10px;
clear: both;
display: block;
font-size: 12px;
font-weight:bold;
}
.single-author .entry-meta .byline
{
display: none;
}
#content nav
{
padding-bottom: 5px;
display: block;
overflow: hidden;
font-size: 11px;
font-size: 1.1rem;
}
#content nav .nav-previous
{
float: left;
width: 50%;
}
#content nav .nav-next
{
float: right;
text-align: right;
width: 50%;
}
#content #nav-above
{
display: none;
}
.paged #content #nav-above, .single #content #nav-above
{
display: block;
}
#nav-below
{
margin: 1em 0 0;
}
.page-link
{
clear: both;
margin: 0 0 1em;
}
.page .edit-link
{
clear: both;
}
/*404 page*/
.error404 .widget
{
float: left;
width: 33%;
}
.error404 .widget .widgettitle, .error404 .widget ul
{
margin-right: 1em;
}
.error404 .widget_tag_cloud
{
clear: both;
float: none;
width: 100%;
}
/*Notices*/
.post .notice, .error404 #searchform
{
background: #EEE;
display: block;
padding: 1em;
}
/*Image Attachments*/
#image-navigation {
margin: 10px 0 0 10px;
}
.image-attachment div.entry-meta
{
float: left;
}
.image-attachment nav
{
float: right;
margin: 0 0 1em;
}
.image-attachment .entry-content
{
clear: both;
}
.image-attachment .entry-content .entry-attachment
{
margin: 0 0 1em;
text-align: center;
margin-top: 6px;
}
.image-attachment .entry-content .attachment
{
display: block;
margin: 0 auto;
text-align: center;
}
/*Aside Posts*/
.format-aside .entry-header
{
display: none;
}
.single .format-aside .entry-header
{
display: block;
}
.format-aside .entry-content, .format-aside .entry-summary
{
padding-top: 1em;
}
.single .format-aside .entry-content, .single .format-aside .entry-summary
{
padding-top: 0;
}
/*Gallery Posts*/
.format-gallery .gallery-thumb
{
float: left;
margin: 0 1em 0 0;
}
/*Image Posts*/
.format-image .entry-header
{
display: none;
}
.single .format-image .entry-header
{
display: block;
}
.format-image .entry-content, .format-image .entry-summary
{
padding-top: 1em;
}
.single .format-image .entry-content, .single .format-image .entry-summary
{
padding-top: 0;
}
/*=Images
--------------------------------------------------------------*/
img
{
margin: 10px 0;
}
#supersized img
{
margin: 0;
}
a img
{
border: none;
}
p img
{
}
/*
Resize images to fit the main content area.
- Applies only to images uploaded via WordPress by targeting size-* classes.
- Other images will be left alone. Use "size-auto" class to apply to other images.
*/
img.size-auto, img.size-full, img.size-large, img.size-medium, .attachment img, .widget-area img, .wp-caption
{
max-width: 100%;
/*When images are too wide for containing element, force them to fit.*/
height: auto;
/*Override height to match resized width for correct aspect ratio.*/
}
img.alignleft
{
margin-right: 1em;
}
img.alignright
{
margin-left: 1em;
}
.wp-caption
{
text-align: center;
}
.wp-caption img
{
}
.wp-caption .wp-caption-text
{
margin: 0.5em;
}
.gallery-caption
{
}
.wp-smiley
{
margin: 0;
}
/*=Forms
--------------------------------------------------------------*/
button, #submit {
background: #222;
border: 1px solid #666;
color: white;
cursor: pointer;
font-family: Georgia, "Times New Roman", Times, serif;
padding: 5px 10px;
width: auto;
color:#aaa;
}
#searchform label
{
display: none;
}
#searchform {
padding:10px;
}
#searchform input#s
{
width: 60%;
}
input[type=text], input#s
{
margin: 0 1em 0 0;
width: 60%;
}
textarea
{
width: 80%;
}
/*Class for labelling required form items*/
.required
{
color: #CC0033;
}
/*=Comments
--------------------------------------------------------------*/
#comments
{
margin-top: 30px;
}
article.comment
{
display: block;
}
#respond input[type=text]
{
display: block;
width: 60%;
}
#respond textarea
{
display: block;
margin: 0 0 1em;
width: 80%;
}
#respond .form-allowed-tags
{
clear: both;
width: 80%;
}
#respond .form-allowed-tags code
{
display: block;
}
/*=Widgets
--------------------------------------------------------------*/
.widget
{
display: block;
margin-top: 20px;
}
.widget ul
{
margin: 5px 10px 10px;
padding: 10px;
}
.widget ul li
{
margin-top: 5px;
padding-top: 5px;
border-top: 1px solid #222;
}
.widget ul li a, .widget ul li a:visited
{
text-decoration: none;
color: #999;
}
.widget-area .widget_search
{
overflow: hidden;
}
.widget-area .widget_search input
{
float: left;
}
/*=Footer
--------------------------------------------------------------*/
#colophon
{
padding: 10px;
background: #000000;
}
/*Gallery
---------------------------------------------------------------*/
#content .gallery .gallery-item img
{
border:0;
width: 350px;
height: 175px;
padding: 0;
}
#content .gallery .gallery-item {
width:100%;
margin:0;
text-align:left;
}
#main #content .gallery-caption
{
margin: 0 auto;
font-size: 12px;
}
#main .image-attachment
{
width: 100%;
}
.entry-attachment img
{
width:650px;
padding: 0;
margin: 0;
}
.attachment-thumbnail {
width:350px;
height:175px;
margin-left: 20px;
margin-bottom: 20px;
}

Answer 1

Maybe you are zoomed in. Check this by pressing Ctrl+0.

Answer 2

I have fixed the problem. I was using rem based font sizes. However for some strange reason I was getting gigantic font size on size occations, some other times it was working as expected.
Reverting to tradition px sizes, did do the trick. I know it is not the best solution, but I got the job done.