I'm having an issue with my layout where the media screen for mobile is overriding my main CSS. On a laptop, the layout shows an orange color, but on mobile, it switches to yellow. Here's a snippet of my code:
/* main container */
#resume {
padding: 1rem;
margin-top: 2rem;
background-color:silver;
}
.parent {
display: flex;
flex-flow: column nowrap;
background-color:yellow;
}
/****************
* PHONE
****************/
@media screen and (min-width: 460px) {
#resume {
width: 95%;
margin: auto;
}
.display {
max-width: 180px;
}
.child {
flex: 100%;
background-color:orange;
}
.topper {
order: -1;
}
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0, user-scalable=no" name="viewport">
<title>Steve</title>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
</head>
<body>
<div id="resume">
<div class="parent">
<div class="child wider">
<header class="clear" id="header">
<div>
<h1 class="name">Steve</h1>
<h2 class="label">Programmer</h2>
</div><span class="location"><span class="address">2712 Broadway St,</span> <span class="postalCode">CA 94115,</span> <span class="city">San Francisco,</span> <span class="region">California</span> <span class="countryCode">US</span></span>
<div id="contact">
<div class="website">
<span class="fa fa-external-link"></span> <a href="http://richardhendricks.com" target="_blank”>http://richardhendricks.com</a>
</div>
<div class="email">
<span class="fa fa-envelope-o"></span> <a href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="eb998288838a998fab9d8a87887e92c5888486">[email protected]</a>"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="99ebf0faf1f8ebfdd9eff8f5f5fce0b7faf6f4">[email protected]</a></a>
</div>
<div class="phone">
<span class="fa fa-mobile"></span> <a href="tel:(912)%20555-4321">(912) 555-4321</a>
</div>
</div>
<div id="profiles">
<div class="item">
<div class="username">
<span class="fa fa-twitter twitter social"></span> <span>neutralthoughts</span>
</div>
</div>
<div class="item">
<div class="username">
<span class="fa fa-soundcloud soundcloud social"></span> <span class="url"><a href="https://soundcloud.com/dandymusicnl" target="_blank">dandymusicnl</a></span>
</div>
</div>
</div>
</header>
</div>
<div class=" child topper">
2
</div>
</div>
</div>
</body>
</html>