Another thing: the header image. For responsive design is better not to use it as background image but as inline image.
REPLACE in responsive.css
/*------------------------------------------
959px Media
------------------------------------------*/
@media only screen and (max-width: 959px), only screen and (max-device-width: 959px) {
#header {
background-image: url('../images/header960.png');
background-repeat: no-repeat;
background-position: center;
background-color:#fff!important;
height:528px!important;
width:auto!important;
overflow:hidden!important;
}
}
/*------------------------------------------
734px Media
------------------------------------------*/
@media only screen and (max-width: 734px), only screen and (max-device-width: 734px) {
#header {
background-image: url('../images/header740.png');
background-repeat: no-repeat;
background-position: center;
background-color:#fff!important;
height:407px!important;
width:auto!important;
overflow:hidden!important;
margin-top:-20px;
}
}
/*------------------------------------------
450px Media
------------------------------------------*/
@media only screen and (max-width: 450px), only screen and (max-device-width: 450px) {
#header {
background-image: url('../images/header450.png');
background-repeat: no-repeat;
background-position: center;
background-color:#fff!important;
height:248px!important;
width:auto!important;
overflow:hidden!important;
}
}
WITH
#header img {
max-width: 100%;
height: auto!important;
}
Open template.html and replace
<div id="header"></div>
with
<div id="header"><img src="themes/cpgpremade12hereisgina/images/header.png" align="middle"/></div>