I have made a pen https://codepen.io/baxt01/pen/VVeXLz
and the flex, grid and header been fixed all work as expected however when i put the same codes into a page on my own domain most of the css doesn’t work can anyone help me to see why this is happening please here is the link to the same page on my server: http://mnvb.co.uk/oxby/ its really batheling my brain thanks in advance.
Probably because you have @media inside your selectors. When i see on opera your CSS rules it shows all the properties inside @media like unknow property name or invalid property value. All those rules will not be rendered no mather what web browser you use.
So why you dont take the media out of the selector or compile your Sass code into CSS. Here you can see that Sass actually take your @media declaration out of the selector when you compile the code Responsive Web Design in Sass Part 2: Media queries in Sass. Read the @media Bubbling section of that article, i hope it help.
ok this topic has to be closed here as i am just plane dumb i have to be i got a friend on another forum give me the answer to this question.
he simply went onto my codepen and downloaded the compiled code and sent it back to me problem fixed
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<title>Oxbys Windows</title>
<link href="stylesheets/main.css" media="screen" rel="stylesheet">
<style media="screen">
/** global element styling **/
@import "https://fonts.googleapis.com/css?family=Lato:400,700";
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #cc6600;
font-family: 'Lato', sans-serif;
}
#page-wrapper {
position: relative;
}
li {
list-style: none;
}
a {
color: #000;
text-decoration: none;
}
/** global classes styling **/
.container {
max-width: 1000px;
width: 100%;
margin: 0 auto;
}
.btn {
padding: 0 20px;
height: 40px;
font-size: 1em;
font-weight: 900;
text-transform: uppercase;
border: 3px black solid;
border-radius: 15px;
background: transparent;
cursor: pointer;
box-shadow: 2px 3px #cccc00;
}
.grid {
display: flex;
}
header {
position: fixed;
top: 0;
max-height: 75px;
padding: 0px 20px;
display: flex;
justify-content: space-around;
align-items: center;
background-color: #993300;
}
@media (max-width: 600px) {
header {
flex-wrap: wrap;
}
}
.logo {
width: 60vw;
}
@media (max-width: 650px) {
.logo {
margin-top: 15px;
width: 100%;
position: relative;
}
}
.logo img {
width: 20%;
height: 20%;
max-width: 300px;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
margin-left: 20px;
margin-top: 100px;
}
@media (max-width: 650px) {
.logo img {
margin: 0 auto;
}
}
nav {
font-weight: 400;
}
@media (max-width: 650px) {
nav {
margin-top: 10px;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 0 50px;
}
nav li {
padding-bottom: 5px;
}
}
nav ul {
width: 35vw;
display: flex;
flex-direction: row;
justify-content: space-around;
}
@media (max-width: 650px) {
nav ul {
flex-direction: column;
}
}
#hero {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
height: 200px;
margin-top: 50px;
}
#hero h2 {
margin-bottom: 20px;
word-wrap: break-word;
}
#hero input[type="email"] {
max-width: 275px;
width: 100%;
padding: 5px;
}
#hero input[type="submit"] {
max-width: 150px;
width: 100%;
height: 30px;
margin: 15px 0;
border: 0;
background-color: #f1c40f;
}
#hero input[type="submit"]:hover {
background-color: orange;
transition: background-color 1s;
}
@media (max-width: 650px) {
#hero {
margin-top: 120px;
}
}
#features {
margin-top: 30px;
}
#features .icon {
display: flex;
align-items: center;
justify-content: center;
height: 125px;
width: 20vw;
color: #cc9900;
}
@media (max-width: 550px) {
#features .icon {
display: none;
}
}
#features .desc {
display: flex;
flex-direction: column;
justify-content: center;
height: 125px;
width: 80vw;
padding: 5px;
}
@media (max-width: 550px) {
#features .desc {
width: 100%;
text-align: center;
padding: 0;
height: 150px;
}
}
@media (max-width: 650px) {
#features {
margin-top: 0;
}
}
#how-it-works {
margin-top: 50px;
display: flex;
justify-content: center;
}
#how-it-works iframe {
max-width: 560px;
width: 100%;
}
#pricing {
margin-top: 60px;
display: flex;
flex-direction: row;
justify-content: center;
}
#pricing #smix, #pricing #mmix, #pricing #lmix {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
width: calc(100% / 3);
margin: 10px;
border: 1px solid #000;
border-radius: 3px;
}
#pricing #smix .level, #pricing #mmix .level, #pricing #lmix .level {
background-color: #ddd;
color: black;
padding: 15px 0;
width: 100%;
text-transform: uppercase;
font-weight: 700;
}
#pricing #smix h2, #pricing #mmix h2, #pricing #lmix h2 {
margin-top: 15px;
}
#pricing #smix ol, #pricing #mmix ol, #pricing #lmix ol {
margin: 15px 0;
}
#pricing #smix ol li, #pricing #mmix ol li, #pricing #lmix ol li {
padding: 5px 0;
}
#pricing #smix button, #pricing #mmix button, #pricing #lmix button {
border: 0;
margin: 15px 0;
background-color: #f1c40f;
font-weight: 400;
}
#pricing #smix button:hover, #pricing #mmix button:hover, #pricing #lmix button:hover {
background-color: orange;
transition: background-color 1s;
}
@media (max-width: 800px) {
#pricing {
flex-direction: column;
}
#pricing #tenor, #pricing #bass, #pricing #valve {
max-width: 300px;
width: 100%;
margin: 0 auto;
margin-bottom: 10px;
}
}
footer {
margin-top: 30px;
background-color: #ddd;
padding: 20px;
}
footer ul {
display: flex;
justify-content: flex-end;
}
footer ul li {
padding: 0 10px;
}
footer span {
margin-top: 5px;
display: flex;
justify-content: center;
font-size: 0.9em;
color: #444;
}
</style>
</head>
<body>
<div id="page-wrapper">
<header id="header">
<div class="logo">
<img id="header-img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSYZEd822gADxylgoo48DIMJL9O6_WVBR5XnjtLzYYKEog689Uw" alt = "locally grown logo" height = "50" width = "50">
</div>
<nav id="nav-bar">
<ul>
<li><a class="nav-link" href="#germinating-dates">germinating Dates</a></li>
<li><a class="nav-link" href="#when-to-plant-out">when to plant out</a></li>
<li><a class="nav-link" href="#when-to-harvest">when to harvest</a></li>
<li><a class="nav-link" href="#pricing">pricing</a></li>
</ul>
</nav>
</header>
<div class="container">
</div>
<div id="hero">
<h2>Join my news letter for tips and tricks.</h2>
<form id="form" action="https://www.freecodecamp.com/email-submit">
<input name="email" id="email" type="email" placeholder="Enter your email address" required>
<input id="submit" type="submit" value="Sign up" class="btn">
</form>
</div>
<div class="container">
<div id="features">
<div class="grid">
<div class="icon">
<i class="fa fa-3x fa-calendar"></i>
</div>
<div class="desc">
<h2 id = "germinating-dates">germinating dates</h2>
<p>Generally you should be ready to begin germinating your seed from late January through untill April or May.</p>
</div>
</div>
<div class="grid">
<div class="icon">
<i class="fa fa-3x fa-hourglass"></i>
</div>
<div class="desc">
<h2 id = "when-to-plant-out">When To Plant Out</h2>
<p>Once all the frosts have passed and the seedlings are big enough to plant.</p>
</div>
</div>
<div class="grid">
<div class="icon">
<i class="fa fa-3x fa-battery-full" aria-hidden="true"></i>
</div>
<div class="desc">
<h2 id = "when-to-harvest">When To Harvest</h2>
<p>Once the vegitables have reached full maturaty try not to leave in the ground to long so not to spoil the plant.</p>
</div>
</div>
</div>
<div id="how-it-works">
<iframe width="729" height="410" src="https://www.youtube.com/embed/4hVtMCGVMaQ" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div id="pricing">
<div id="smix">
<div class="level">
A small mix
</div>
<h2>£10</h2>
<ol>
<li>Lorem ipsum.</li>
<li>Lorem ipsum.</li>
<li>Lorem ipsum dolor.</li>
<li>Lorem ipsum.</li>
</ol>
<button class="btn">Select</button>
</div>
<div id="mmix">
<div class="level">
A medium mix
</div>
<h2>£15</h2>
<ol>
<li>Lorem ipsum.</li>
<li>Lorem ipsum.</li>
<li>Lorem ipsum dolor.</li>
<li>Lorem ipsum.</li>
</ol>
<button class="btn">Select</button>
</div>
<div id="lmix">
<div class="level">
A large mix (garden size)
</div>
<h2>£25</h2>
<ol>
<li>More of each seed</li>
<li>A sack of compost</li>
<li>Lorem ipsum dolor.</li>
<li>Lorem ipsum.</li>
</ol>
<button class="btn">Select</button>
</div>
</div>
<footer>
<ul>
<li><a href="#">Privacy</a></li>
<li><a href="#">Terms</a></li>
<li><a href="#">Contact</a></li>
</ul>
<span>Copyright would go here</span>
</footer>
</div>
</div>
</body>
</html>