Not exactly sure where to post this.
I have recently updated my website and now the Masthead or Header section TEXT doesn't reduce on an ANDROID browser
The html is as follows and CSS is as follows...
What do I need to do to get the Header text to reduce in proportion on a mobile android broswer... and anything I need to do for 'normal' pc browsers?
This is a DWT....
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!-- #BeginEditable "doctitle" -->
<title>Sea View Blue</title>
<!-- #EndEditable -->
<link rel="stylesheet" href="seaviewstyle.css" type="text/css" />
</head>
<body>
<center>
<div id="wrapper">
<div id="masthead" style="height: 100px">
<div id="mastheadleft">
<img alt="" height="100" longdesc="" src="" width="100" /></div>
<div id="mastheadright">
<img alt="" height="100" longdesc="" src="" width="108" style="float: right" /></div>
<div id="mastheadfacebook">
<a href="" target="_blank">
<img alt="" height="50" longdesc="" src="" width="50" /></a></div>
<div id="mastheadtwitter">
<a href="5" target="_blank">
<img alt="" height="50" longdesc="" src="" width="51" /></a></div>
<h1 class="style7">Greenwidgetistheverybest.com</h1><p>Customer Helpline: Telephone 012345678</p></div>
<div id="body_wrapper">
<div id="left_nav">
<ul id="left_col" class="style1">
</ul>
</div>
<div id="right_nav"><ul id="right_col">
<li></li>
</ul>
</div> <div id="content">
<div id="content1"><!-- #BeginEditable "content1" -->(content1)<!-- #EndEditable --></div>
<div id="content2"><!-- #BeginEditable "content2" -->(content2)<!-- #EndEditable --></div></div>
</div>
<div id="footer"><br /><p></p><br />
</div>
</div>
</center>
</body>
</html>
I have copied in 'relevant CSS IF needed..
/* CSS layout */
<style type="text/css">
.style1 {
text-align: left;
}
.style4 {
border: 3px solid #5E6D96;
background-color: #EAEFF5;
text-align:center;
}
.style7 {
margin-bottom: 0px;
text-align: center;
}
body {
margin: 0px auto 0 auto;
background: #5e6d96;
font-family: Tahoma, Verdana;
font-size: 10pt;
}
#masthead {
margin-top: 0px;
text-align: center;
margin-bottom: 0px;
margin: 0px;
border-bottom-style:solid;
border-color: white;
border: 5px;
padding-top: 0px;
background-color: #5e6d96;
height: 100px;
width: 960px;
}
#masthead h1 {
padding-left:5px;
margin-left: 105px;
padding-top: 10px;
text-align: center;
color:white;
font-family: Arial, Helvetica, sans-serif;
color:white;
font-size:xx-large;
font-weight: bold;
font-style: normal;
font-variant: normal;
line-height: 50px;
}
#masthead p {
padding-top: 0px;
margin-top: 0px;
color:white;
font-size:medium;
font-weight: bold;
text-align:center;
}
#mastheadleft {
float: left;
width: 100px; /*change to whatever is desired */
font-size: .7em; /*based on what the font size setting in masthead - not body element */
text-align: left;
height: 100px;
}
#mastheadright {
float: right;
width: 108px;
height: 80px
}
#mastheadfacebook {
float: right;
width: 70px;
padding-top: 25px;
vertical-align:middle;
text-align:center;
line-height:50px;
}
#mastheadtwitter {
float: left;
width: 70px;
padding-top: 25px;
vertical-align:middle;
text-align:center;
line-height:50px;
}
#body_wrapper {
width: 960px;
margin-left: 0px;
padding-left: 0px;
}
#left_nav {
background-color: #eaeff5;
font-family:Arial, Helvetica, sans-serif;
font-size:small;
height: 1350px;
padding-top: 0px;
padding-left: 0px;
width: 200px;
float: left;
margin: 0px;
text-align: left;
}
ul
{
list-style-type: disc;
padding: 10px;
margin: 10px;
}
#right_nav {
background-color: #eaeff5;
height: 1350px;
padding-top: 0px;
width: 200px;
float: right;
margin: 0 auto;
text-align: left;
font-size:small;
font-family:Arial, Helvetica, sans-serif;
list-style-type:none;
}
#pagesubtitle {
margin-top: 0px;
font-family: Arial, Helvetica, sans-serif;
font-size: xx-large;
font-weight: bold;
font-style: normal;
font-variant: normal;
color: #000000;
line-height: 30px;
width: 400px;
text-align: center;
height: 30px;
vertical-align: middle;
padding-top: 0px;
}
#footer {
width: 960px;
background: #5e6d96;
height: 220px;
clear: both;
text-align: center;
color:#eaeff5;
}
h1 {
margin-top: 0px;
color:#000000;
font-size:x-large;
}
