My contact page has an issue that only occurs in Chrome, where the background disappears most of the time. This problem is not present in Firefox, Edge, or Safari on my TA's MacBook, but interestingly, hovering over a box resolves the issue on her device. I am using Chrome version 63.0.3239.132.
<!DOCTYPE html>
<html class="h-100p" lang="en">
<head>
<title>Daniel G Richmond</title>
<link href="./assets/css/reset.css" rel="stylesheet" type="text/css">
<link href="./assets/css/style.css" rel="stylesheet" type="text/css">
<meta charset="utf-8">
</head>
<body class="bgc-388E3C d-f fd-c h-100p pad-20px">
<section class="fl-1">
<header>
<nav class="ai-b bb-s c-E8F5E9 d-f jc-sa">
<p class="fs-300p w-61p">Daniel Richmond</p>
<div class="ai-b d-f jc-sa w-39p">
<a class="bdc-FFEB3B bds-s bgc-1B5E20 bw-3 c-E8F5E9 d-b fs-200p pad-20px ta-c td-n bgc-1B5E20-hv" href="./index.html">About</a>
<a class="bdc-FFEB3B bds-s bgc-1B5E20 bw-3 c-E8F5E9 d-b fs-200p pad-20px ta-c td-n bgc-1B5E20-hv" href="./portfolio.html">Portfolio</a>
<a class="bdc-FFEB3B bds-s bgc-1B5E20 bw-3 c-E8F5E9 d-b fs-200p pad-20px ta-c td-n bgc-1B5E20-hv" href="./contact.html">Contact</a>
</div>
</nav>
</header>
<section id="content" class="ai-fs d-f jc-sa mt-5p">
<form action="/tbd" method="POST" id="contact" class="bdc-FFEB3B bds-s bgc-1B5E20 bw-3 w-55p">
<div><h2 class="bb-s c-E8F5E9 fs-200p">Contact Me</h2></div>
<div class="c-E8F5E9 fs-150p pad-1p"><label for="firstName">First Name:</label></div>
<div><input class="ml-5p w-30p" type="text" id="firstName" name="first_name"></div>
<div class="c-E8F5E9 fs-150p pad-1p"><label for="lastName">Last Name:</label></div>
<div><input class="ml-5p w-30p" type="text" id="lastName" name="last_name"></div>
<div class="c-E8F5E9 fs-150p pad-1p"><label for="mail">E-mail:</label></div>
<div><input class="ml-5p w-30p" type="email" id="mail" name="user_mail"></div>
<div class="c-E8F5E9 fs-150p pad-1p"><label for="msg">Message:</label></div>
<div><textarea class="ml-5p w-30p" id="msg" name="user_message">Type your message here!</textarea></div>
<!-- There will eventually be JavaScript and MySQL to make the button do what I want it to do! -->
<div class="c-E8F5E9 fs-150p pad-1p"><button type="submit">Send your message</button></div>
</form>
<aside class="bdc-FFEB3B bds-s bw-3 bgc-1B5E20 w-30p">
<h2 class="bb-s c-E8F5E9 fs-200p pad-20px">Connect with me!</h2>
<div id="connections" class="d-f fb-30p fg-1 jc-sa mt-5p">
<a href="https://github.com/Sonic12040"><img class="pad-5p" src="./assets/images/gitHub.png" alt="GitHub"></a>
<a href="https://www.linkedin.com/danielgrichmond"><img class="pad-5p" src="./assets/images/linkedIn.png" alt="LinkedIn"></a>
<a href="https://stackoverflow.com/users/9054375/daniel-richmond"><img class="pad-5p" src="./assets/images/stackOverflow.png" alt="Stack Overflow"></a>
</div>
</aside>
</section>
</section>
<footer class="bt-s c-E8F5E9 fs-0 pad-20px">
<p class="fs-200p ta-c">Copyright ©2018 by <a href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4f2b2e21262a236128613d262c272220212b0f28222e2623612c2022">[email protected]</a>">Daniel G Richmond</a></p>
</footer>
</body>
</html>
Please find below the CSS File along with the reset file:
.bb-s {
border-bottom: solid;
}
.bdc-FFEB3B {
border-color: #FFEB3B;
}
.bds-s {
border-style: solid;
}
.bgc-1B5E20 {
background-color: #1B5E20;
}
.bgc-1B5E20-hv:hover {
background-color: #00C853;
}
.bgc-388E3C {
background-color: #388E3C;
}
.bt-s {
border-top: solid;
}
.bw-3 {
border-width: 3px;
}
.c-E8F5E9 {
color: #E8F5E9;
}
.d-b {
display: block;
}
.d-f {
display: flex;
}
.f-l {
float: left;
}
.fb-30p {
flex-basis: 30%;
}
.fd-c {
flex-direction: column;
}
.fg-1 {
flex-grow: 1;
}
.fs-0 {
flex-shrink: 0;
}
.fl-1 {
flex: 1 0 auto;
}
.fs-150p {
font-size: 150%;
}
.fs-200p {
font-size: 200%;
}
.fs-300p {
font-size: 300%;
}
.h-100p {
height: 100%;
}
.h-128px {
height: 128px;
}
.jc-sa {
justify-content: space-around;
}
.ml-5p {
margin-left: 5%;
}
.mt-5p {
margin-top: 5%;
}
.pad-1p {
padding: 1%;
}
.pad-5p {
padding: 5%;
}
.pad-20px {
padding: 20px;
}
.ta-c {
text-align: center;
}
.td-n {
text-decoration: none;
}
.w-28p {
width: 28%;
}
.w-30p {
width: 30%;
}
.w-39p {
width: 39%;
}
.w-40p {
width: 40%;
}
.w-55p {
width: 55%;
}
.w-61p {
width: 61%
}
.w-128px {
width: 128px;
}