Nims Nims - 7 months ago 36
HTML Question

Safari on my iPhone 6 is ignoring overflow-x: hidden

my site www.nimaiwalsh.com appears fine in all browsers and at different sizes except for Mobile Safari on my iPhone 6. A thin white line appears on the right hand side. I have tried everything, and I have had a look at some of the other suggestions regarding overlow-x: hidden.

Any help would be greatly appreciated!

Picture of site on iphone



<!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:nimai@nimaiwalsh.com">nimai@nimaiwalsh.com</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>&nbsp;</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 &copy 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; }

}




Answer

The issue is the hyphen in "FRONT-END" and the left margin applied to .heading-text-box. To take people's eye off of the hyphen on small screens, I would try something like this:

@media only screen and (max-width: 480px) {
  .heading-text-box {
    margin-left: 0;
  }

  h1 {
    letter-spacing: normal;
  }
}

It will look something like this after these two tweaks:

enter image description here