h1 tag positioning on mobile browser

Question

I cant seem to figure out why the h1 tag is showing differently on mobile browsers.

The site is www.jd-financialservices.co.uk When I view the site on my desktop everything is fine. When I view it on my Nexus 4 however, the 10px gap between h1 and the .topbar div has gone. It's the same on Opera, Firefox and Chrome.

Can anyone help please?

Thank you in advance.

Answer 1

I would advise against using position:relative; and negative top on all of your elements.

With some minor changes to your css you will probably find that it fixes itself: here is my updated version of your css. See if that fixes things.

I updated: aside nav h1 .welcome and footer. By changing some of the header elements to use position:absolute and then using margin to space elements out. You will probably find the css is more compatible cross-browser/device.

@font-face { font-family: 'Constantia'; src: url('constantia/constantia.eot'); src: url('constantia/constantia.eot?#iefix') format('embedded-opentype'), url('constantia/constantia.svg#Constantia') format('svg'), url('constantia/constantia.woff') format('woff'), url('constantia/constantia.ttf') format('truetype'); font-weight: normal; font-style: normal;}

* {
    margin-top: 0px;
    margin-bottom: 0px;
}

html {
    font-family: 'droid sans';
     -webkit-font-smoothing: antialiased;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
}

body {
    width: 940px;
    margin: 0 auto;
}

li {
    list-style: none;
}

a {
    text-decoration: none;
    color: #ffffff;
}

a:hover {
    text-decoration: underline;
}

header a:hover {
    text-decoration: none;
}

h1  {
    font-family: 'Constantia', helvetica;
    position: absolute;
    top: 20px;
}

header {
    height: 140px;
    position: relative;
    margin-bottom: 40px;
}

nav {
    width: 660px;
    height: 30px;
    background-color: #00788a;
    position: absolute;
    font-size: 1.2em;
    bottom: 0;
    right: 0;
}

nav li a {
    color: #ffffff;
}

nav a:hover {
    text-decoration: underline;
}

nav ul {
    padding-left: 0px;
}

nav ul li {
    display: inline;
    line-height: 30px;
    vertical-align: middle;
    color: #ffffff;
    padding-left: 70px;
    padding-right: 65px;
}

aside {
    height: 600px;
    width: 240px;
    float: left;
    background-color: #00788a;
    color: #ffffff;
    clear: both;
    position: relative;
    text-align: center;
    margin-bottom: 30px;
}

article a {
    color: #00788a;
}

.contain {
    width: 940px;
}

footer {
    height: 100px;
    clear: both;
    background-color: #00788a;
    color: rgba(255,255,255,0.5);
    position: relative;
    font-size: 0.85em;
    padding: 0 10px;
    line-height: 1.5em;
    margin-top: 40px;
}

footer li {
    display: inline;
    border-left: 2px solid rgba(255,255,255,0.5);
    padding: 0 5px;
}

footer li:first-child {
    border: none;
}

footer ul {
    padding-left: 0;
    text-align: center;
}

.foot_fade {
    color: rgba(255,255,255,0.5);
}

.first_initial {
    font-size: 110px;
    color: #00788a;
    font-weight: lighter;
}

.second_initial {
    font-size: 101px;
    color: #00788a;
    font-weight: lighter;
    position: relative;
    top: -6px;
}

.rest_of_title {
    font-size: 26px;
    position: relative;
    left: -73px;
    top: 20px;
    font-weight: lighter;
}

header a {
    color: #000000;
}

.header_background {
    float: right;
    position: relative;
    z-index: -1;
}

.topbar {
    width: 940px;
    height: 30px;
    background-color: #00788a;
}

.call_now {
    padding: 10px 50px 10px 50px;
    font-size: 1.5em;
    line-height: 1.5em;
    border-bottom: 5px solid #ffffff;
    text-shadow: 2px 2px 2px #2a2a2a;
}

.home_service {
    padding: 10px 40px 10px 40px;
    font-size: 1.45em;
    line-height: 1.5em; 
    border-bottom: 5px solid #ffffff;
    text-shadow: 2px 2px 2px #2a2a2a;
}

.service_list {
    font-size: 1.25em;
    line-height: 3em;
    text-align: left;
    padding-top: 35px;
    padding-left: 20px;
    text-shadow: 2px 2px 2px #2a2a2a;
}

.welcome {
    width: 660px;
    float: right;
    padding: 0px 0px 0px 40px;
    font-size: 0.9em;
    line-height: 2em;
    color: #2a2a2a;
    position: relative;
    /* top: -95px; */
    text-align: justify;
}

.services {
    width: 660px;
    float: right;
    padding: 0px 0px 0px 40px;
    position: relative;
    top: -95px;
}

.services a {
    text-decoration: none;
    position: absolute; 
    top: 151px; 
    left: 0; 
    width: 275px;
    color: #ffffff;
    background-color: rgba(0,0,0,0.5);
    padding: 10px 0 10px 10px;
}

.services div {
    margin-bottom: 15px;
}

.services div:last-child {
    margin-bottom: 0;
}

.savings_pic {
    position: relative;
    height: 190px;
    width: 285px;
}

.retire_pic {
    position: absolute;
    top: 0;
    right: 0;
    height: 190px;
    width: 285px;
}

.protection_pic {
    position: relative;
    height: 190px;
    width: 285px;
}

.insurance_pic {
    position: absolute;
    top: 205px;
    right: 0;
    height: 190px;
    width: 285px;
}

.mortgage_pic {
    position: relative;
    height: 190px;
    width: 285px;
}

.retire {
    width: 300px;
    float: right;
    margin: 0 0 10px 10px;
}

/*.shadow {
    box-shadow: 0 0 3px 1px rgba(42,42,42,0.5);
    margin: 3px 0;
}*/

.overlay {
    background-color: rgba(0, 0, 0, 0.5);
    bottom: 54px;
    color: #FFFFFF;
    padding: 10px;
    position: relative;
    width: 265px;
}

.overlay a {
    text-decoration: none;
    color: #ffffff;
}

.overlay a:hover {

}

.left {
    float: left;
}

.right {
    float: right;
}

.regulation {
    font-style: italic;
    color: #9a9a9a;
    font-size: 0.9em;
}

.smallprint {
    width: 520px;
    font-size: 0.9em;
    text-align: center;
    position: absolute;
    right: 210px;
    top: 30px;
}

.copyright {
    width: 310px;
    margin: 0 auto;
    }

.scapa {
    position: absolute;
    bottom: 0;
    right: 10px;
    font-size: 0.9em;
}