I am creating a pricing page in my Django app which has 3 columns. If the screen size is more than 768 pixels, I want it to show all 3 columns side-by-side. But if it's less 768 pixels, I want there to only be 1 column with the different pricing options on top of each other.
For some reason, the @media properties are not being followed. It doesn't matter what the screen size is, the page is always showing 3 columns. The below screenshot should only have 1 column (like most mobile-friendly pages)
Current page:
Js Fiddle - LINK
The strange thing is that in this JS Fiddle, it does seem to be following the @media screen and (max-width) properties.
Code:
<html>
<head>
<style>
@import url(https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css);
@import url(https://fonts.googleapis.com/css?family=Raleway:400,500,800);
@import url(https://fonts.googleapis.com/css?family=Montserrat:800);
/* MOBILE CUSTOMIZATIONS */
@media screen and (max-width: 767px) {
.snip1214 .plan {
width: 90%;
margin: 0 auto;
background-color: blue;
}
}
@media screen and (min-width: 768px) {
.snip1214 .plan {
margin: 0;
width: 25%;
position: relative;
float: left;
background-color: #ffffff;
border: 1px solid rgba(0, 0, 0, 0.1);
}
}
html {
height: 100%;
}
body {
background-color: #212121;
display: flex;
justify-content: center;
align-items: center;
flex-flow: wrap;
margin: 0;
height: 100%;
}
.snip1214 {
font-family: 'Raleway', Arial, sans-serif;
color: #000000;
text-align: center;
font-size: 16px;
width: 100%;
max-width: 1000px;
margin: 40px 10px;
}
.snip1214 * {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.snip1214 header {
position: relative;
}
.snip1214 .plan-title {
position: relative;
top: 0;
font-weight: 800;
padding: 5px 15px;
margin: 0 auto;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
margin: 0;
display: inline-block;
background-color: #222f3d;
color: #ffffff;
text-transform: uppercase;
}
.snip1214 .plan-cost {
padding: 0px 10px 20px;
}
.snip1214 .plan-price {
font-family: 'Montserrat', Arial, sans-serif;
font-weight: 800;
font-size: 2.4em;
color: #34495e;
}
.snip1214 .plan-type {
opacity: 0.6;
}
.snip1214 .plan-features {
padding: 0;
margin: 0;
text-align: center;
list-style: outside none none;
font-size: 0.8em;
}
.snip1214 .plan-features li {
border-top: 1px solid #d2d7e2;
padding: 10px 5%;
}
.snip1214 .plan-features li:nth-child(even) {
background: rgba(0, 0, 0, 0.08);
}
.snip1214 .plan-features i {
margin-right: 8px;
opacity: 0.4;
}
.snip1214 .plan-select {
border-top: 1px solid #d2d7e2;
padding: 10px 10px 0;
}
.snip1214 .plan-select a {
background-color: #222f3d;
color: #ffffff;
text-decoration: none;
padding: 0.5em 1em;
-webkit-transform: translateY(50%);
transform: translateY(50%);
font-weight: 800;
text-transform: uppercase;
display: inline-block;
}
.snip1214 .plan-select a:hover {
background-color: #46627f;
}
.snip1214 .featured {
margin-top: -10px;
background-color: #34495e;
color: #ffffff;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
z-index: 1;
}
.snip1214 .featured .plan-title,
.snip1214 .featured .plan-price {
color: #ffffff;
}
.snip1214 .featured .plan-cost {
padding: 10px 10px 20px;
}
.snip1214 .featured .plan-features li {
border-top: 1px solid rgba(255, 255, 255, 0.4);
}
.snip1214 .featured .plan-select {
padding: 20px 10px 0;
border-top: 1px solid rgba(255, 255, 255, 0.4);
}
</style>
</head>
<body>
<div class="snip1214">
<div class="plan">
<h3 class="plan-title">
Free
</h3>
<div class="plan-cost"><span class="plan-price">$0</span></div>
<ul class="plan-features">
<li><i class="ion-checkmark"> </i>5GB Linux Web Space</li>
<li><i class="ion-checkmark"> </i>5 MySQL Databases</li>
<li><i class="ion-checkmark"> </i>Unlimited Email</li>
<li><i class="ion-checkmark"> </i>250Gb Monthly Transfer</li>
<li><i class="ion-checkmark"> </i>24/7 Tech Support</li>
<li><i class="ion-checkmark"> </i>Daily Backups</li>
</ul>
<div class="plan-select"><a href="">Select Plan</a></div>
</div>
<div class="plan featured">
<h3 class="plan-title">
Standard
</h3>
<div class="plan-cost"><span class="plan-price">$3.99</span><span class="plan-type">/ Monthly</span></div>
<ul class="plan-features">
<li><i class="ion-checkmark"> </i>25GB Linux Web Space</li>
<li><i class="ion-checkmark"> </i>25 MySQL Databases</li>
<li><i class="ion-checkmark"> </i>Unlimited Email</li>
<li><i class="ion-checkmark"> </i>2000Gb Monthly Transfer</li>
<li><i class="ion-checkmark"> </i>24/7 Tech Support</li>
<li><i class="ion-checkmark"> </i>Daily Backups</li>
</ul>
<div class="plan-select"><a href="">Select Plan</a></div>
</div>
<div class="plan">
<h3 class="plan-title">
Premium
</h3>
<div class="plan-cost"><span class="plan-price">$6.99</span><span class="plan-type">/ Monthly</span></div>
<ul class="plan-features">
<li><i class="ion-checkmark"> </i>100GB Linux Web Space</li>
<li><i class="ion-checkmark"> </i>Unlimited MySQL Databases</li>
<li><i class="ion-checkmark"> </i>Unlimited Email</li>
<li><i class="ion-checkmark"> </i>10000Gb Monthly Transfer</li>
<li><i class="ion-checkmark"> </i>24/7 Tech Support</li>
<li><i class="ion-checkmark"> </i>Daily Backups</li>
</ul>
<div class="plan-select"><a href="">Select Plan</a></div>
</div>
</div>
</body>
</html>
