So I want the link at the bottom of my page to have a bigger font-size on screens smaller than 580px (which should obviously be nearly all phone screens).
If I check it in dev tools and change the width it looks fine like this
but once I use 'phone screen mode' and for example iPhone 5 it's back to the normal font-size of 25px, what the media query should've increased?
body{
font-family: Raleway;
margin: 0;
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/****************************/
img{
width: 96%;
margin: 2%;
}
/*********** Footer Section **************/
#link-back a, #link-back p{
color: #666666;
font-family: Raleway;
font-weight: bold;
text-decoration: none;
float: none;
text-align: center;
padding-top: 10px;
font-size: 25px;
margin: 10px 0 -10px 0;
display: block;
}
#link-back::before
{
content: "";
display: block;
position: absolute;
z-index: -1;
width: 100%;
height: 50px;
background:#666666;
opacity: .4;
}
:hover#link-back a {
color: red;
}
#copyright p, #copyright{
text-align: center;
float: none;
margin: 0 0 5px 0;
padding: 0;
color: #b7b7b7;
font-size: 13px;
}
#media all and (max-width: 580px){
#link-back a, #link-back p{
font-size: 45px;
padding-top: 15px;
}
#link-back::before{
height: 80px;
{
}
<html>
<head>
<title>Typographic Pairing</title>
<link rel="icon" type="image/png" href="../img/heart.png">
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet">
<link rel="stylesheet" href="main.css">
<link href="https://fonts.googleapis.com/css?family=Playfair+Display|Raleway" rel="stylesheet">
</head>
<body>
<img src="http://heartcube.co.uk/typographic-pairing/project2.jpg" alt="project 2">
<p id="copyright">© 2017 Bettina Bremm</p>
<p id="link-back">back to heartcube</p>
</body>
</html>
As #CBroe noticed, the meta tag was missing for the viewport!
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Related
I am creating a navbar, and I want to make sure that the colored box when I hover on nav items are big enough to cover the words, but not so big they expand well below the items. This can be seen in the picture above.
I have set the height at 80px; is there any way I can keep the height of the nav at 80px, but still solve this issue?
[1]: https://i.stack.imgur.com/EH8Qt.png
This will get you started. Just needs styling.
body {
padding: 0;
margin: 0;
}
.navbar {
display: flex;
background-color: #eee;
font-family: sans-serif;
height: 100px;
color: black;
border-top: 6px solid lightblue;
}
ul {
display: flex;
flex-direction: row;
list-style: none;
}
ul>li>a {
padding: 3px 12px;
color: black;
font-size: 16px;
margin: 0 24px;
text-decoration: none;
display: block;
}
ul>li>a:hover {
padding: 3px 12px;
color: white;
background: #ff6600;
font-size: 16px;
margin: 0 24px;
text-decoration: none;
display: block;
}
#media screen and (max-width: 992px) {
ul>li>a {
font-size: 12px;
margin: 0 6px;
}
ul>li>a:hover {
font-size: 12px;
margin: 0 6px;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no" />
<title>home</title>
</head>
<body>
<div class="navbar">
<ul>
<li><a class="active" href=""><strong>COLLECTIONS</strong></a></li>
<li>ANIMATIONS</li>
<li>ANIMATIONS</li>
<li>ANIMATIONS</li>
<li>ANIMATIONS</li>
</ul>
</div>
</body>
</html>
When I set my browser window to a height of let's say 200px I have to scroll down to be able to see all the text in the left column of my page. I would like my background image to not only cover the viewport height, but to cover the complete page which has to be scrolled through, so that my layout does not break and the text is visible on top of the background image.
I'm doing an online course and it was explained that I can solve this problem by setting a min-height: 100vh. I've set this on .intro, .bg-image and .intro-content. My problem still occurs though.
Thanks in advance.
DEMO :
body {
margin: 0;
font-size: 1.125rem;
font-family: 'Source Sans Pro', sans-serif;
color: #404040;
text-align: center;
display: flex;
}
/* ===============
Typography
=================*/
h1,
h2,
p {
margin-top: 0;
}
h1 {
font-size: 3.5rem;
font-weight: 300;
color: #fff;
margin: 4em 0 0;
}
h1 + p {
color: #f18119;
font-weight: 900;
font-size: 1.75rem;
text-transform: uppercase;
margin: 0;
}
.top-text {
color: #f18119;
font-weight: 900;
font-size: 0.625rem;
text-transform: uppercase;
letter-spacing: 1.5px;
border-top: 5px solid #f18119;
order: -1;
}
h2 {
font-size: 1.75rem;
font-weight: 900;
text-transform: uppercase;
margin: 0;
}
h2 + p {
color: #f18119;
font-weight: 900;
text-transform: uppercase;
}
.disclaimer-text {
font-size: 0.625rem;
letter-spacing: 1px;
}
strong {
font-weight: 900;
}
/* ===============
Intro
=================*/
.intro {
width: 50%;
min-height: 100vh;
position: relative;
}
.bg-image {
background-image: url(bbq_spareribs.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-color: rgba(51, 44, 44, .7);
background-blend-mode: overlay;
filter: blur(3px);
width: 100%;
max-width: 100%;
min-height: 100vh;
}
.intro-content {
width: 100%;
max-width: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
min-height: 100vh;
box-sizing: border-box;
padding: 0 .5em 2em;
display: flex;
flex-direction: column;
}
/* ===============
Main content
=================*/
.main-content {
padding: 2em 1em;
box-sizing: border-box;
width: 50%;
min-height: 100vh;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="Tristan Graaff">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght#300;400;900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
<title>BBQ</title>
</head>
<body>
<div class="intro">
<div class="bg-image"></div>
<div class="intro-content">
<h1>Learn how to make <br> <strong>the best BBQ ribs</strong> <br> in town</h1>
<p>Join us for this live webinar</p>
<p class="top-text">Mouthwateringly delicious</p>
</div>
</div>
<div class="main-content">
<h2>Become a BBQ master! </h2>
<p>Register Today</p>
<p>BBQ isn't just standing in front of your grill with it on full blast and hoping for the best. It's an art!
One way to speed up the process is to learn from the best. You can do just that by signing up for this free
webinar!</p>
<form>
<input type="text" value="first name">
<input type="text" value="email address">
<input type="submit" value="register">
</form>
<p class="disclaimer-text">We'll never share your information without your permission</p>
</div>
</body>
</html>
As you already set your container .intro with height: 100vh;. You should just set on .bg-image, min-height: 100%; instead of 100vh;. This way the image will grow with a minimum height of your container.
The problem with putting always min-height:100vh; in a container with the same setting than you cannot add margin as you did because the block wont be contain by container anymore.
For the image to fit correctly with its sibling you should make the css as below.
otherwise the intro-content will be too long. I let you check the little change I made.
DEMO:
body {
margin: 0;
font-size: 1.125rem;
font-family: 'Source Sans Pro', sans-serif;
color: #404040;
text-align: center;
display: flex;
}
/* ===============
Typography
=================*/
h1,
h2,
p {
margin-top: 0;
}
h1 {
font-size: 3.5rem;
font-weight: 300;
color: #fff;
margin: 4em 0 0;
}
h1 + p {
color: #f18119;
font-weight: 900;
font-size: 1.75rem;
text-transform: uppercase;
margin: 0;
}
.top-text {
color: #f18119;
font-weight: 900;
font-size: 0.625rem;
text-transform: uppercase;
letter-spacing: 1.5px;
border-top: 5px solid #f18119;
order: -1;
}
h2 {
font-size: 1.75rem;
font-weight: 900;
text-transform: uppercase;
margin: 0;
}
h2 + p {
color: #f18119;
font-weight: 900;
text-transform: uppercase;
}
.disclaimer-text {
font-size: 0.625rem;
letter-spacing: 1px;
}
strong {
font-weight: 900;
}
/* ===============
Intro
=================*/
.intro {
width: 50%;
min-height: 100vh;
position: relative;
}
.bg-image {
background-image: url(https://cdn.pixabay.com/photo/2015/03/26/09/47/sky-690293_1280.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-color: rgba(51, 44, 44, .7);
background-blend-mode: overlay;
filter: blur(3px);
width: 100%;
max-width: 100%;
/*min-height: 100vh;*/
min-height: 100%; /* ADDED */
position:absolute; /* ADDED */
z-index:-1; /* ADDED */
}
.intro-content {
width: 100%;
max-width: 100%;
/*position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);*/
z-index: 2;
min-height: 100vh;
box-sizing: border-box;
padding: 0 .5em 2em;
display: flex;
flex-direction: column;
}
/* ===============
Main content
=================*/
.main-content {
padding: 2em 1em;
box-sizing: border-box;
width: 50%;
min-height: 100vh;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="Tristan Graaff">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght#300;400;900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
<title>BBQ</title>
</head>
<body>
<div class="intro">
<div class="bg-image"></div>
<div class="intro-content">
<h1>Learn how to make <br> <strong>the best BBQ ribs</strong> <br> in town</h1>
<p>Join us for this live webinar</p>
<p class="top-text">Mouthwateringly delicious</p>
</div>
</div>
<div class="main-content">
<h2>Become a BBQ master! </h2>
<p>Register Today</p>
<p>BBQ isn't just standing in front of your grill with it on full blast and hoping for the best. It's an art!
One way to speed up the process is to learn from the best. You can do just that by signing up for this free
webinar!</p>
<form>
<input type="text" value="first name">
<input type="text" value="email address">
<input type="submit" value="register">
</form>
<p class="disclaimer-text">We'll never share your information without your permission</p>
</div>
</body>
</html>
enter image description hereSorry, another newb. requiring help, please??
I have created a site (first site for 15 years) and there are a couple of things i'd like to know but the first and most important one is, why does my site header not show on iPhones?
Android showing header
iPhone without header
I have added the viewport meta tag but it didn't change anything.
Another thing l have read on here is adding #media but it didn't say where to add it so l tried a few places without success.
Can someone help me please?
Test page code
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="http://fonts.googleapis.com/css?family=Roboto+Condensed:700italic,400,300,700" rel="stylesheet" type="text/css">
<!--[if lte IE 8]><script src="js/html5shiv.js"></script><![endif]-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/skel.min.js"></script>
<script src="js/skel-panels.min.js"></script>
<script src="js/init.js"></script>
<noscript>
<link rel="stylesheet" href="css/skel-noscript.css" />
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/style-desktop.css" />
</noscript>
<!--[if lte IE 8]><link rel="stylesheet" href="css/ie/v8.css" /><![endif]-->
<!--[if lte IE 9]><link rel="stylesheet" href="css/ie/v9.css" /><![endif]-->
</head>
<body class="left-sidebar">
<!-- Header -->
<div id="header">
<div class="container">
<!-- Logo -->
<div id="logo">
<h2>Dress Up Leeds Ltd</h2>
</div>
<!-- Nav -->
<nav id="nav">
<ul>
<li>home</li>
<li>store</li>
<li class="active">contact us</li>
<li>about</li>
</ul>
</nav>
</div>
</div>
style.css for header
header
{
margin-bottom: 2em;
line-height: 1.7em;
}
header h2
{
font-size: 2.5em;
}
header .byline
{
display: block;
margin: 0.5em 0 0 0;
padding: 0 0 0.5em 0;
text-transform: uppercase;
font-size: 1.4em;
}
p {
font-size: 1.1em;
}
and
#header
{
position: relative;
background: #FFF;
}
#header .container
{
position: relative;
padding: 4em 0em;
}
style-mobile.css for header
header
{
}
header h2
{
font-size: 1.6em;
}
header .byline
{
font-size: 1em;
}
and
#header
{
display: none;
}
#logo
{
display: none;
}
#nav
{
display: none;
}
style-mobile css the whole file
/*********************************************************************************/
/* Basic */
/*********************************************************************************/
body,input,textarea,select
{
line-height: 1.75em;
font-size: 11pt;
letter-spacing: 0;
}
body
{
padding-top: 44px;
}
h2, h3, h4, h5, h6
{
font-size: 1.5em;
}
section,
article
{
clear: both;
margin: 2em 0 2em 0 !important;
}
section > :first-child,
article > :first-child
{
margin-top: 0 !important;
}
section:first-child,
article:first-child
{
margin-top: 0 !important;
}
.container
{
padding: 0em 1em;
}
.button
{
display: block;
width: 100%;
text-align: center;
}
header
{
}
header h2
{
font-size: 1.6em;
}
header .byline
{
font-size: 1em;
}
/*********************************************************************************/
/* UI */
/*********************************************************************************/
#titleBar
{
background: #202020 url(images/img01.jpg) repeat;
}
#titleBar .title
{
display: block;
color: #fff;
text-align: center;
line-height: 44px;
}
#titleBar .toggle
{
position: absolute;
left: 0;
top: 0;
width: 80px;
height: 60px;
}
#titleBar .toggle:after
{
content: '';
display: block;
width: 20px;
height: 12px;
position: absolute;
left: 10px;
top: 15px;
background: url('images/toggle.svg') 0px 0px no-repeat;
opacity: 0.5;
}
#titleBar .toggle:active:after
{
opacity: 0.75;
}
#navPanel
{
background: #202020 url(images/img01.jpg) repeat;
box-shadow: inset -10px 0px 20px 0px rgba(0,0,0,0.5);
}
#navPanel .link
{
display: block;
color: #888;
text-decoration: none;
height: 44px;
line-height: 44px;
border-top: solid 1px rgba(255,255,255,0.1);
letter-spacing: 1px;
text-transform: uppercase;
padding: 0 1em 0 1em;
}
#navPanel .link:first-child
{
border-top: 0;
}
#navPanel .link.depth-0
{
color: #fff;
}
#navPanel .indent-1 { display: inline-block; width: 1em; }
#navPanel .indent-2 { display: inline-block; width: 2em; }
#navPanel .indent-3 { display: inline-block; width: 3em; }
#navPanel .indent-4 { display: inline-block; width: 4em; }
#navPanel .indent-5 { display: inline-block; width: 5em; }
#navPanel .depth-0 { color: #fff; }
/*********************************************************************************/
/* Header */
/*********************************************************************************/
#header
{
display: block;
}
#logo
{
display: block;
}
#nav
{
display: block;
}
/*********************************************************************************/
/* Banner */
/*********************************************************************************/
#banner
{
padding: 6em 0em;
}
/*********************************************************************************/
/* Main */
/*********************************************************************************/
#page
{
padding: 2em 0em 2em 0em;
}
#main
{
margin-top: 3em;
padding-top: 0em;
border-top: none;
}
.homepage #main
{
margin-top: 3em;
padding-top: 3em;
}
/*********************************************************************************/
/* Footer */
/*********************************************************************************/
#footer
{
padding: 0em 0em 2em 0em;
}
/*********************************************************************************/
/* Featured */
/*********************************************************************************/
#featured
{
position: relative;
padding: 4em 0em 2em 0em;
}
#featured .divider
{
padding: 2em 0em 0em 0em;
}
#featured .left
{
float: none;
width: 100%;
}
Try this:
#header {
display: block;
}
#logo {
display: block;
}
#nav {
display: block;
}
display: none hides elements, so your css is hiding your header. The viewport tag makes no difference in whether or not the header is hidden. I am missing context here, but your css looks like it is very intentionally hiding your header, so I am guessing it was written by someone else? If so, that person may have written it with the intent of applying these css rules for one screen size and applying a different set of rules for another screen size, but perhaps they left the task unfinished, or we are only seeing a small part of the css here. If that is the case, then you should look into using media queries to apply different sets of rules for different screen sizes.
Basically I'm trying to write some responsive code but I can't get it to work. What am I doing wrong?
Here's the page code with the extraneous bits removed:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Zinuru Project | Tighe O'Connor</title>
<!-- Site Stylesheet(s) -->
<link rel="stylesheet" type="text/css" href="scripts/zinuru.css" >
<link rel="stylesheet" type="text/css" href="scripts/zinuru-media-queries.css">
<!-- JQuery Stylesheet(s) -->
<link href="scripts/lightbox.css" rel="stylesheet" type="text/css">
</head>
<body id="<%=(rsMainMenu.Fields.Item("menuClass").Value)%>">
<div id="pageWrapper">
<aside>
<!--#include file="includes/aside.asp" -->
</aside>
<article>
<header>
<!--#include file="includes/header.asp" -->
</header>
<nav>
<!--#include file="includes/navbar.asp" -->
</nav>
<figure class="banner_slider">
<%
While ((rpt_Images__numRows <> 0) AND (NOT rsImages.EOF))
%>
<img src="images/<%=(rsImages.Fields.Item("imageName").Value)%>" class="nailthumb-container">
<%
rpt_Images__index=rpt_Images__index+1
rpt_Images__numRows=rpt_Images__numRows-1
rsImages.MoveNext()
Wend
%>
</figure>
<div id="content"><%=(rsContent.Fields.Item("content").Value)%></div>
</article>
</div>
<!-- /#pageWrapper -->
<!-- JQuery Runtime -->
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<!-- JQuery Plugins -->
<script src="scripts/jquery.nailthumb.1.1.js" type="text/javascript"></script>
<script src="scripts/lightbox-2.6.min.js" type="text/javascript"></script>
<script src="scripts/cycle.js" type="text/javascript"></script>
<!-- Local Scripts -->
<script type="text/javascript" src="scripts/localscripts.js"></script>
</body>
</html>
Here's the main site stylesheet:
/* CSS crunched with Crunch - http://crunchapp.net/ */
#import "/scripts/html5reset-1.6.1.css";
#import "/scripts/muli.css";
#import "/scripts/painted.css";
/**************************************************************************************
GENERAL STYLING
**************************************************************************************/
body {
background-color: #161616;
font-family: 'MuliRegular';
color: #616163;
font-size: 1em;
}
#pageWrapper {
position: relative;
top: 35px;
width: 836px;
margin: auto;
}
a {
outline: 0;
outline: none;
}
#home .home,
#artist .artist,
#installations .installations,
#paintings .paintings,
#reviews .reviews,
#teaching .teaching {
color: #ffffff;
}
/**************************************************************************************
HEADER
**************************************************************************************/
header {
height: 35px;
}
header #logo {
text-align: right;
}
header #logo #zinuru {
display: none;
}
header #logo #tighe {
font-family: 'MuliLight';
font-variant: small-caps;
font-size: 1.6em;
color: #ffffff;
}
/**************************************************************************************
NAVIGATION BAR
**************************************************************************************/
nav {
width: 706px;
height: 40px;
text-align: center;
}
nav dl {
padding: 0;
margin: 0;
display: inline-block;
position: relative;
text-align: left;
}
nav dl a {
display: block;
white-space: nowrap;
text-decoration: none;
color: #616163;
}
nav dl {
*display: inline;
}
nav dt {
height: 35px;
line-height: 35px;
}
nav dt a:hover {
color: #ffffff;
}
nav dd {
position: absolute;
left: 0;
margin: 0;
display: none;
background: #161616;
box-shadow: 1px 1px 2px #949494;
min-width: 190px;
padding: 0 3px;
z-index: 1000;
}
nav dd a {
color: #949494;
line-height: 25px;
}
nav dl.right dd {
text-align: right;
left: auto;
right: 0;
}
nav dl:hover dd {
display: block;
}
nav dl dd a:hover {
color: #ffffff;
}
nav .menuDivider {
margin: 0 5px;
color: #FFF;
}
/**************************************************************************************
ASIDE
**************************************************************************************/
aside {
width: 130px;
float: left;
}
aside #zinuru {
position: fixed;
margin: 240px 0 0 -195px;
width: 500px;
-moz-transform: rotate(270deg);
-webkit-transform: rotate(270deg);
-o-transform: rotate(270deg);
-ms-transform: rotate(270deg);
transform: rotate(270deg);
font-family: 'painted';
font-size: 5.5em;
color: #ffffff;
}
/**************************************************************************************
ARTICLE
**************************************************************************************/
article {
margin-left: 130px;
width: 706px;
/**************************************************************************************
PAINTINGS
**************************************************************************************/
}
article p {
margin-bottom: 10px;
line-height: 120%;
text-align: justify;
}
article h1 {
font-family: 'painted';
font-size: xx-large;
color: #ffffff;
margin: 20px 0 10px;
}
article figure {
border: #FFF thin solid;
}
article #content {
margin-top: 15px;
}
article table.paintings {
width: 706px;
}
article table.paintings tr {
text-align: center;
}
article table.paintings td {
padding-bottom: 6px;
}
article .paintingsThumbs {
width: 140px;
height: 140px;
}
/**************************************************************************************
THUMBNAIL CONTAINER
**************************************************************************************/
.nailthumb-container {
width: 706px;
height: 211.8px;
}
and this is my starting point media query stylesheet:
/* CSS crunched with Crunch - http://crunchapp.net/ */
/**************************************************************************************
SCREEN 320px
**************************************************************************************/
#media only screen and (max-device-width: 320px) {
#pageWrapper {
top: 0;
width: 300px;
margin: auto;
}
header {
height: 60px;
}
header #logo #zinuru {
display: block;
line-height: 5px;
}
header #logo #tighe {
font-size: 1em;
}
nav {
display: none;
}
aside {
display: none;
}
}
Hope you can see where I've gone wrong and what I need to change.
Many thanks in advance.
change:
#media only screen and (max-device-width: 480px) { ... }
to:
#media only screen and (max-width: 480px) { ... }
that way your site will respond on a mobile device and on the desktop.
By using max-device-width those rules will only kick in if the physical device's screen width is less than X px not if you adjust your browser size. I changed the number to 480px because that's the standard width of an iphone screen. 320px is too small.
Also use:
<meta name="viewport" content="width=device-width, initial-scale=1">
the initial-scale set's the virtual scale created by mobile devices to 100%, so that your site is viewed properly.
I'm almost done with my website but I have one little problem.
I have have a fixed header and fixed footer on my site with a responsive layout.
All works just like I want it, except when i "tilt" my phone to "landscape" mode. Then the site creates a "padding/margin" at the bottom and the footer gets "forced" up with the content creating a grey border at the bottom. The footer follows the content.
But here's the thing. It works fine on my other pages that have more content (for scrolling) but not on my index page that only have some contact info.
When I add more text to the index page it becomes normal.
Anyone know what I'm doing wrong and can help?
I assume there is a easy fix for this but I can't seem to find it.
<title>Name</title>
<meta charset="utf-8">
<link rel="shortcut icon" href="images/icons/favicon.ico">
<link rel="stylesheet" href="style/structure.css">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0, minimal-ui" />
<?php include("style/header.php"); ?>
<div class="container">
<div class="content">
<h1>
Name
<br>
Tlf: Tlf
<br>
E-post: mail
</h1>
</div> <!-- END CONTENT -->
</div> <!-- END CONTAINER -->
<?php include("style/footer.php"); ?>
* {
margin: 0px;
padding: 0px;
}
body {
margin: 0 auto;
width: 90%;
clear: both;
background-color: #FFFFFF;
color: #444444;
font-size: 87.5%; /* 14px */
font-family: times, 'timesnewroman', 'times new roman', 'bakersville', serif;
line-height: 1.5;
-webkit-font-smoothing: 'antialiased';
position: relative;
display: block;
}
header {
height: 40px;
width: 90%;
position: fixed;
z-index: 1;
border-bottom: 1px solid rgba(136, 136, 136, 0.4);
background-color: #FFFFFF;
top: 0;
display: block;
}
footer {
width: 90%;
height: 35px;
float: left;
border-top: 1px solid rgba(136, 136, 136, 0.4);
text-align: center;
position: fixed;
bottom: 0;
background-color: #FFFFFF;
padding-top: 5px;
display: block;
}
.container {
max-width: auto;
min-height: auto;
float: none;
display: block;
text-align: center;
}
.content {
background-color: #ffffff;
color: #999999;
margin: 0 auto;
display: block;
padding-top: 40px;
padding-bottom: 40px;
}
.content h1 {
color: #000000;
float: left;
font-size: 13px;
line-height: 1.3;
font-weight: normal;
font-family: helvetica;
text-align: left;
}
If you get the grey area in your site on safari (iOS7) it might just be your viewport. Adding to the viewport meta: (height="device-height") will probably solve you problem.