0
мой сайт www.nimaiwalsh.com отображается хорошо во всех браузерах и разных размерах, кроме Mobile Safari на моем iPhone 6. С правой стороны появляется тонкая белая линия. Я пробовал все, и я рассмотрел некоторые другие предложения относительно overlow-x: hidden.Safari на моем iPhone 6 игнорирует overflow-x: скрытый
Любая помощь была бы принята с благодарностью!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="Nimai Walsh">
<meta name="description" content="Web Designer and Developer based in Sydney, Australia. Specialising in responsive and pageless designed sites and offering freelance servives for a number of projects.">
<link rel="stylesheet" type="text/css" href="vendors/css/normalize.css">
<link rel="stylesheet" type="text/css" href="vendors/css/grid.css">
<link rel="stylesheet" type="text/css" href="vendors/css/ionicons.min.css">
<link rel="stylesheet" type="text/css" href="vendors/css/animate.css">
<link rel="stylesheet" type="text/css" href="resources/css/style.css">
<link rel="stylesheet" type="text/css" href="resources/css/queries.css">
<link href='https://fonts.googleapis.com/css?family=Lato:400,300,100,300italic' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Raleway:100,300,400' rel='stylesheet' type='text/css'>
<title>Nimai Walsh - Web Designer and Developer</title>
</head>
<body>
<header>
<nav>
<div class="row">
<img src="resources/img/NW-logo.svg" alt="Nimai Walsh Logo" class="logo">
<ul class="main-nav js--main-nav">
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
<a class="mobile-nav-btn js--mobile-nav"><i class="ion-navicon-round"> </i></a>
</div>
</nav>
<div class="heading-text-box">
<h1>Web Designer/Front-End Developer</h1>
<p class="long-copy">Hi, I'm Nimai Walsh. A web designer and developer currenly based in Sydney, Australia. I specialise in responsive and simple pageless designed sites.</p>
</div>
</header>
<section class="section-portfolio js--section-features" id="portfolio">
<div class="row">
<h2>Portfolio</h2>
</div>
<div class="row">
<div class="col span-1-of-3">
<div class="project-box js--wp-1">
<div>
<img src="resources/img/omnifood-project.jpg" alt="Omnifood web project">
</div>
<div class="project-details">
<ul>
<li><i class="ion-monitor"></i>Web</li>
<li><i class="ion-code-working"></i>HTML5, CS3, jQuery</li>
<li><i class="ion-compose"></i>A fictional site created as a project to develop my skills</li>
</ul>
</div>
<div>
<a href="projects/omnifood/index.html" target="_blank" class="btn btn-full">Visit site</a>
</div>
</div>
</div>
<div class="col span-1-of-3">
<div class="project-box js--wp-2">
<div>
<img src="resources/img/blog-project.jpg" alt="Nims Playhouse blog project">
</div>
<div class="project-details">
<ul>
<li><i class="ion-monitor"></i>Web</li>
<li><i class="ion-code-working"></i>Wordpress CMS</li>
<li><i class="ion-compose"></i>A personal blog created to explore joyful things in life</li>
</ul>
</div>
<div>
<a href="http://www.nimsplayhouse.com" target="_blank" class="btn btn-full">Visit site</a>
</div>
</div>
</div>
<div class="col span-1-of-3">
<div class="project-box js--wp-3">
<div>
<img src="" alt="">
</div>
<div class="project-details">
<ul>
<li><i class="ion-monitor"></i></li>
<li><i class="ion-code-working"></i></li>
<li><i class="ion-compose"></i>A space for my next project. Could it be your site?</li>
</ul>
</div>
<div>
<a href="" target="_blank" class="btn btn-full">Visit site</a>
</div>
</div>
</div>
</div>
</section>
<section class="section-about" id="about">
<div class="row">
<h2>About me</h2>
</div>
<div class="row">
<img id="profile-pic" src="resources/img/profile-pic.jpg" alt="Picture of Nimai Walsh" class="js--wp-4">
</div>
<div class="row">
<div class="col span-2-of-3">
<p>I completed a Bachelor of Multimedia in 2007, worked as a Web Publisher, a Senior Support Analyst and joined the Royal Australian Navy in 2010. I am completing my service with the Navy at the end of this year to persue my deferred career as a Web Designer and Developer.</p>
<p>During the past 6 months I have completed a number of online courses in my own time to develop my skills.</p>
<p>I am currently based in Sydney, Australia, but planning to re-locate to Brisbane in 2017.</p>
<div id="skills" class="clearfix">
<h3>Skills</h3>
<ul>
<li><i class="ion-social-html5-outline"></i> HTML5</li>
<li><i class="ion-social-css3-outline"></i> CSS3</li>
<li>jQuery</li>
</ul>
</div>
</div>
<div class="col span-1-of-3 twitter-feed">
<a href="https://twitter.com/nimaiwalsh" target="_blank"><i id="twitter-icon" class="ion-social-twitter-outline js--twitter-icon"></i></a>
<div id="tweecool" class="twitter-widget js--twitter-widget"></div>
</div>
</div>
</section>
<section class="section-contact" id="contact">
<div class="row">
<h2>I look forward to hearing from you</h2>
</div>
<div class="row">
<ul class="contact-social js--wp-5">
<li class="twitter"><a href="https://twitter.com/nimaiwalsh" target="_blank"><i class="ion-social-twitter"></i></a></li>
<li class="linkedin"><a href="https://au.linkedin.com/in/nimaiwalsh" target="_blank"><i class="ion-social-linkedin"></i></a></li>
</ul>
<p>+61403676341</p>
<p><a href="mailto:[email protected]">[email protected]</a></p>
</div>
<form method="post" action="#" class="contact-form js--wp-6">
<div class="row">
<div class="col span-1-of-3">
<label for="name">Name</label>
</div>
<div class="col span-2-of-3">
<input type="text" id="name" placeholder="Your name" required>
</div>
</div>
<div class="row">
<div class="col span-1-of-3">
<label for="email">Email</label>
</div>
<div class="col span-2-of-3">
<input type="email" id="email" placeholder="Your email" required>
</div>
</div>
<div class="row">
<div class="col span-1-of-3">
<label for="phone">Phone</label>
</div>
<div class="col span-2-of-3">
<input type="number" id="phone" placeholder="Your phone number">
</div>
</div>
<div class="row">
<div class="col span-1-of-3">
<label for="message">Message</label>
</div>
<div class="col span-2-of-3">
<textarea name="message" id="message" placeholder="Your message"></textarea>
</div>
</div>
<div class="row">
<div class="col span-1-of-3">
<label> </label>
</div>
<div class="col span-2-of-3">
<input type="submit" value="Hit me up">
</div>
</div>
</form>
</section>
<footer>
<div class="row">
<div class="col span-1-of-2">
<ul class="footer-nav">
<a href="#portfolio"><li>Portfolio</li></a>
<a href="#about"><li>About</li></a>
<a href="#contact"><li>Contact</li></a>
</ul>
</div>
<div class="col span-1-of-2">
<ul class="social-links">
<a href="https://twitter.com/nimaiwalsh" target="_blank"><li><i class="ion-social-twitter"></i></li></a>
<a href="https://au.linkedin.com/in/nimaiwalsh"><li><i class="ion-social-linkedin"></i></li></a>
</ul>
</div>
</div>
<div class="row">
<p>Copyright © 2016 Nimai Walsh</p>
</div>
</footer>
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<!-- Waypoints jQuery plugin -->
<script src="vendors/js/jquery.waypoints.min.js"></script>
<!-- Enables old browsers to understand and execute CSS media queries -->
<script src="https://cdn.jsdelivr.net/respond/1.4.2/respond.min.js"></script>
<!-- Enables old browsers to use and style HTML 5 scripts -->
<script src="https://cdn.jsdelivr.net/html5shiv/3.7.3/html5shiv.min.js"></script>
<!-- Allows use of CSS3 pseudo-classes in IE 6, 7 and 8-->
<script src="https://cdn.jsdelivr.net/selectivizr/1.0.3b/selectivizr.min.js"></script>
<!-- jQuery twitter feed -->
<script src="vendors/js/tweecool.js"></script>
<script src="resources/js/script.js"></script>
<!-- Google Analytics -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-77429553-1', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>/*---------------------------------------*/
/* -- BASIC SETUP and GLOBAL SETTINGS -- */
/*=======================================*/
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html, body {
color: #707478;
font-family: 'Lato', 'Arial', sans-serif;
font-size: 20px;
font-weight: 300;
text-rendering: optimizeLegibility;
width: 100%;
overflow-x: hidden;
}
.clearfix { zoom: 1; }
.clearfix:after {
content: ' ';
clear: both;
display: block;
height: 0;
visibility: hidden;
}
/*---------------------------------------*/
/* -- RE-USABLE COMPONENTS -- */
/*=======================================*/
.row {
max-width: 1140px;
margin: 0 auto;
}
section { padding: 70px 0; }
/* Links */
a:link,
a:visited {
color: #f90;
-webkit-transition: color 0.2s;
transition: color 0.2s;
}
a:hover,
a:active,
.twitter-feed a i:hover,
.twitter-feed a i:active {
color: #dd8500;
}
/* Headings */
h1, h2, h3 {
font-family: 'Raleway', 'Arial', sans-serif;
}
h1 {
font-weight: 200;
font-size: 220%;
color: #fff;
word-spacing: 4px;
letter-spacing: 2px;
text-transform: uppercase;
}
h2 {
font-weight: 300;
font-size: 150%;
text-transform: uppercase;
text-align: center;
margin-bottom: 30px;
}
h2:after {
display: block;
height: 2px;
width: 80px;
background-color: #f90;
content: " ";
margin: 0 auto;
margin-top: 20px;
}
h3 {
font-weight: 300;
font-size: 120%;
text-transform: uppercase;
}
/* Paragraph */
.long-copy {
font-size: 110%;
font-weight: 300;
line-height: 145%;
letter-spacing: 1px;
width: 70%;
margin-left: 15%;
color: #FFAD33;
}
/* Buttons */
.btn:link,
.btn:visited,
input[type=submit] {
display: inline-block;
text-decoration: none;
border-radius: 10px;
padding: 10px 20px;
-webkit-transition: border 0.2s, background-color 0.2s;
transition: border 0.2s, background-color 0.2s;
}
.btn-full:link,
.btn-full:visited,
input[type=submit]{
color: #fff;
border: 2px solid transparent;
background-color: #f90;
}
.btn-full:hover,
.btn-full:active,
input[type=submit]:hover,
input[type=submit]:active {
border: 2px solid #DD8500;
background-color: #DD8500;
}
/*---------------------------------------*/
/* -- HEADER SECTION -- */
/*=======================================*/
header {
background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.7), rgba(9, 112, 84, 0.78)), url(img/header-min.jpg);
background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(9, 112, 84, 0.78)), url(img/header-min.jpg);
background-position: center;
background-size: cover;
background-attachment: fixed;
height: 100vh;
}
.heading-text-box {
position: absolute;
width: 80%;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
.logo {
height: 80px;
width: auto;
margin-top: 20px;
float: left;
}
/* Main nav */
.main-nav {
float:right;
margin-top: 50px;
list-style: none;
}
.main-nav li {
display: inline-block;
margin-left: 40px;
}
.main-nav li a:link,
.main-nav li a:visited {
text-decoration: none;
color: #fff;
padding: 8px 0;
text-transform: uppercase;
border-bottom: 2px solid transparent;
-webkit-transition: border-bottom 0.2s;
transition: border-bottom 0.2s;
}
.main-nav li a:hover,
.main-nav li a:active {
border-bottom: 2px solid #FF9900;
}
/* Sticky nav */
.sticky {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: rgba(255, 255, 255, 0.98);
box-shadow: 0 1px 2px #837c7c;
z-index: 99;
}
.sticky .logo {
height: 45px;
width: auto;
margin: 5px 0;
}
.sticky .main-nav { margin-top: 15px; }
.sticky .main-nav li a:link,
.sticky .main-nav li a:visited {
color: #707478;
padding-bottom: 9px;
}
.sticky .mobile-nav-btn {
margin-top: 8px;
}
/* Mobile nav */
.mobile-nav-btn {
float: right;
margin-top: 20px;
cursor: pointer;
display: none;
}
.mobile-nav-btn i {
font-size: 180%;
}
/*---------------------------------------*/
/* -- PORTFOLIO SECTION -- */
/*=======================================*/
.project-box {
background-color: #f8f8f8;
color: #707478;
border-radius: 5px;
padding: 20px;
box-shadow: 0 2px 2px #837c7c;
}
.project-box div ul {
list-style: none;
padding-bottom: 10px;
padding-top: 20px;
line-height: 145%;
}
.project-box div li i {
font-size: 123%;
margin-right: 15px;
color: #dd8500;
}
.project-box div img {
width: 100%;
border-radius: 5px;
padding: 5px;
border: 5px solid #097054;
}
.project-box div:last-child {
text-align: center;
margin-top: 20px;
}
/*---------------------------------------*/
/* -- ABOUT SECTION -- */
/*=======================================*/
.section-about {
background-color: #097054;
color: #e2e2e2;
}
#profile-pic {
display: block;
width: 200px;
height: auto;
margin: 40px auto;
border-radius: 50%;
}
.section-about p {
line-height: 145%;
letter-spacing: 1px;
margin-bottom: 20px;
}
#skills h3 {
display: inline-block;
margin-top: 50px;
float: left
}
#skills li {
display: inline-block;
float: left;
margin: 50px 0 0 40px;
}
.twitter-feed i {
font-size: 250%;
position: relative;
margin-left: 50%;
top: -63px;
}
.twitter-widget {
position: relative;
width: 60%;
margin-left: 20%;
top: -55px;
}
.twitter-widget li {
list-style: none;
clear: both;
}
.twitter-widget li .tweets_txt {
margin-bottom: 15px;
float: left;
font-size: 100%;
}
.twitter-widget li .tweets_txt span {
font-style: italic;
color: #ada7a7;
display: block;
}
/*---------------------------------------*/
/* -- CONTACT SECTION -- */
/*=======================================*/
.contact-social {
text-align: center;
font-size: 200%;
}
.section-contact p {
text-align: center;
line-height: 145%;
}
.contact-social li {
display: inline-block;
text-decoration: none;
padding: 5px;
}
.contact-social li.twitter a:hover,
.contact-social li.twitter a:active {
color: #55acee;
}
.contact-social li.linkedin a:hover,
.contact-social li.linkedin a:active {
color: #007bb5;
}
.contact-form {
width: 60%;
margin: 60px auto;
}
.contact-form input[type=number],
.contact-form input[type=text],
.contact-form input[type=email],
.contact-form textarea {
width: 100%;
padding: 4px;
border-radius: 5px;
border: 1px solid #dd8500;
}
.contact-form textarea {
height: 100px;
}
*:focus { outline-color: #097054;}
/*---------------------------------------*/
/* -- FOOTER SECTION -- */
/*=======================================*/
footer {
background-color: #3c3f43;
padding: 30px;
}
.footer-nav {
float: left;
font-size: 80%;
}
.footer-nav li {
display: inline-block;
list-style: none;
padding: 5px;
}
.social-links {
float: right;
font-size: 200%;
}
.social-links li {
display: inline-block;
list-style: none;
padding: 5px;
}
footer p {
text-align: center;
font-size: 80%;
}
/*---------------------------------------*/
/* -- ANIMATIONS -- */
/*=======================================*/
.js--wp-1,
.js--wp-2,
.js--wp-3,
.js--wp-4,
.js--wp-6 {
opacity: 0;
}
.js--wp-1.animated,
.js--wp-2.animated,
.js--wp-3.animated,
.js--wp-4.animated,
.js--wp-6.animated {
opacity: 1;
}
.js--wp-5 {
-webkit-animation-duration: 2s;
animation-duration: 2s;
}/* Big tablet to 1200px (widths smaller then our 1140px row */
@media only screen and (max-width: 1200px) {
.row { padding: 0 2%; }
.heading-text-box {
width: 100%;
margin: 0 2%;
}
}
/* Small tablet to big tablet e.g ipad on landscape view: 768px to 1023px */
@media only screen and (max-width: 1023px) {
html,
body {
font-size: 18px;
}
.twitter-widget {
width: 70%;
margin: 0 10%;
}
.contact-form {
width: 70%;
}
}
/* Small phones to small tablets: 481px to 767px */
@media only screen and (max-width: 767px) {
html, body {
font-size: 16px;
}
.col {
width: 100%;
margin: 0 0 4% 0;
}
.contact-form {
width: 100%;
}
.twitter-widget {
top: 0;
}
.twitter-feed i {
top: 0;
}
.heading-text-box { margin: 0 4%; }
/* Use mobile navigation */
.main-nav { display: none; }
.main-nav.show-Nav { display: block; }
.mobile-nav-btn {
display: block;
margin-right: 10px;
margin-top: 40px;
}
.main-nav {
float:left;
margin-top: 40px;
}
.main-nav li {
display: block;
padding: 10px;
margin-left: 40px;
}
.main-nav li a:link,
.main-nav li a:visited { border: 0; }
.main-nav li a:hover,
.main-nav li a:active { border: 0; }
.contact-form { width: 80%; }
}
/* Small phones: 0 to 480px */
@media only screen and (max-width: 480px) {
.contact-form { width: 100%; }
section { padding: 50px 0;}
.logo { height: 50px; }
.sticky .logo { height: 30px;}
.mobile-nav-btn { margin-top: 25px; }
.sticky .mobile-nav-btn { margin-top: 2px; }
}
Вы должны включить экран захват из Safari на iPhone 6, а также соответствующий CSS/HTML-код. –