Struggling to center an image for mobile devices, I have successfully done so for tablets and regular desktop devices. However, I am facing challenges in editing the code to ensure full responsiveness for mobile devices. Additionally, there is excess white space on the right when I minimize the window to a mobile size. Please provide guidance.
/* Typography */
.header {font-family: "futura-pt", Arial, Helvetica, sans-serif; font-weight: 700; font-size: 1.0em; margin: 0; padding: 0; text-transform: uppercase; letter-spacing: 0.1em;}
p {font-family: "futura-pt", Arial, Helvetica, sans-serif; font-weight: 400; font-size: 1.0em; margin: 0; padding: 0; text-transform: uppercase; letter-spacing: 0.1em;}
/* Sizes */
.large-5 {font-size: 5.0em;}
.large-4 {font-size: 4.0em;}
.large-3 {font-size: 3.0em;}
.large-25 {font-size: 2.5em;}
.large-2 {font-size: 1.5em;}
.large-15 {font-size: 1.3em;}
@media screen and (min-width: 768px) {
.large-5 {font-size: 5.0em;}
.large-4 {font-size: 4.0em;}
.large-3 {font-size: 3.0em;}
.large-25 {font-size: 2.5em;}
.large-2 {font-size: 2.0em;}
.large-15 {font-size: 1.5em;}
}
/* Colours */
.white {color: #fff;}
.black {color: #000;}
/* Spacing */
.padding-top {padding-top: 2em;}
.padding-top-double {padding-top: 2em;}
.padding-top-triple {padding-top: 1em;}
.padding-bottom {padding-bottom: 1em;}
/* Links */
a:link, a:visited, a:active {color: #fff; text-decoration: none;}
a:hover {color: #fff; text-decoration: underline;}
/* General */
html, section {height:100%;}
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
text-align: center;
background: #fff;
}
*, *:before, *:after {
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
/* Structure */
.content{
width: 100%;
position: relative;
height: 100%;
margin: 0 auto;
border: 5px solid #fff;
background:url(http://jedesigns.uk/img/hd-sunset-river-HD-1200x1920.jpg) no-repeat;
background-size:cover;
background-position:center, bottom;
}
.content img {
max-width: 100%;
}
my-email::after {
content: attr(data-domain);
}
my-email::before {
content: attr(data-user) "\0040";
}
/* Media Queries */
@media screen and (max-width: 510px) {
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
text-align: center;
float: left;
}
.content{
width: 100%;
position: relative;
height: 100%;
margin: 0 auto;
border: 5px solid #fff;
background-size:cover;
background-position:center, bottom;
}
.content img {
max-width: 75%;
}
@media screen and (max-width: 450px) {
body {
width: 100%;
height: 100%;
text-align: center;
}
.content{
width: 100%;
position: relative;
height: 100%;
background-size:cover;
background-position:center, bottom;
}
p { width: 75%;
text-align: center;
}
.content img {
max-width: 50%;
}
}<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<title>Coming Soon</title>
<link href="css/Main.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<section class="content">
<div style="width:500px; margin:0 auto; top:25%; position:relative">
<img src="img/logo.png">
<img src="img/line.png">
<p class="header large-2 white padding-top-triple">Coming This Fall 2015</p>
<p class="white padding-top"><span class="header">Email: </span><a href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f2b897869a8593cbc4b29a9a2eedc8799">[email protected]</a>"><my-email data-user="Jethwa" data-domain="jedesigns.uk"></my-email></a></p>
</div>
</section>
</body>
</html>