Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Preston Chandler
Front End Web Development Techdegree Student 7,405 PointsMedia Queries dont seem to be working at all. Cant seem to figure out what im doing wrong.
Was having issues with the previous media queries exercise as well. See below for my code. Please help!
/* Web fonts -------------------- */
@font-face {
font-family: 'Abolition Regular';
src: url('../fonts/abolition-regular-webfont.eot');
src: url('../fonts/abolition-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/abolition-regular-webfont.woff') format('woff'),
url('../fonts/abolition-regular-webfont.ttf') format('truetype');
}
/* Base Styles -------------------- */
* {
box-sizing: border-box;
}
body {
color: #878787;
margin: 0;
font: 1em/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;
}
h1, h2 {
font-family: 'Abolition Regular', Helvetica, Arial, sans-serif;
}
h1 {
font-size: 5.625rem; /* 90px/16px */
color: rgba(255, 255, 255, 1);
text-transform: uppercase;
font-weight: normal;
line-height: 1.3;
margin: 12px 0 0;
text-shadow: 0 1px 0 #ccc,
0 2px 0 #c9c9c9,
0 3px 0 #bbb,
0 4px 0 #b9b9b9,
0 5px 0 #aaa,
0 6px 1px rgba(0,0,0,.1),
0 0 5px rgba(0,0,0,.1),
0 1px 3px rgba(0,0,0,.3),
0 3px 5px rgba(0,0,0,.2),
0 5px 10px rgba(0,0,0,.25),
0 10px 10px rgba(0,0,0,.2),
0 20px 20px rgba(0,0,0,.15);
}
h2 {
font-size: 3.3125em; /* 53px/16px */
font-weight: normal;
line-height: 1.1;
margin: 0 0 .5em; /* 0 0 26px */
}
h3 {
font-size: 1.25em; /* 20px/16px */
color: #48525c;
line-height: 1.2;
margin-bottom: 1.7em; /* 34px */
}
img {
max-width: 100%;
margin-bottom: 20px;
border-radius: 10px;
}
ul,
ol {
margin: 30px 0;
}
li {
margin-bottom: 10px;
}
/* Pseudo-classes ------------------ */
a:link {
color: rgb(255, 169, 73);
text-decoration: none;
}
a:visited {
color: lightblue;
}
a:hover {
color: rgba(255, 169, 73, .4);
}
a:active {
color: lightcoral;
}
/* Main Styles --------------------- */
.main-header {
padding-top: 170px;
height: 850px;
background: linear-gradient(#ffa949, transparent 90%),
linear-gradient(0deg, #fff, transparent),
#ffa949 url('../img/mountains.jpg') no-repeat center;
background-size: cover;
}
.title {
color: white;
font-size: 1.625rem; /* 26px/16px */
letter-spacing: .065em;
font-weight: 200;
border-bottom: 2px solid;
padding-bottom: 10px;
}
.intro {
font-size: 1.25em; /* 20px/16px */
line-height: 1.6;
}
.primary-content,
.main-header,
.main-footer {
text-align: center;
}
.primary-content {
padding-top: 25px;
padding-bottom: 95px;
}
.secondary-content {
padding-top: 80px;
padding-bottom: 70px;
border-bottom: 2px solid #dfe2e6;
}
.callout {
font-size: 1.25em;
border-bottom: 3px solid;
padding: 0 9px 3px;
margin-top: 20px;
display: inline-block;
}
.main-footer {
padding-top: 60px;
padding-bottom: 60px;
border-bottom: 10px solid #ffa949;
}
.t-border {
border-top: 2px solid #dfe2e6;
}
/* Layout Styles ------------------ */
.primary-content,
.secondary-content {
width: 75%;
padding-left: 50px;
padding-right: 50px;
margin: auto;
max-width: 960px;
}
.wildlife {
color: white;
text-align: left;
padding: 18% 24%;
border-top: 10px solid #ffa949;
margin: 105px 0 60px;
background: #434a52 url('../img/bear.jpg') no-repeat center;
background-size: cover;
box-shadow: inset 0 0 50px 10px rgba(0,0,0 .8);
border-radius: 10px;
}
.arrow {
width: 50px;
margin-top: 150px;
}
/* Floated Columns ------------------ */
.resorts,
.tips {
width: 46.5%;
}
.tips {
float: left;
}
.resorts {
float: right;
}
/* Float Clearfix ------------------ */
.group:after {
content: "";
display: table;
clear: both;
/* Media Queires -------------------- */
@media (max-width: 1024px) {
.primary-content,
.secondary-content {
width: 90%;
}
}
@media (max-width: 768px) {
.primary-content,
.secondary-content {
width: 100%;
padding: 20px;
border: none;
}
.main-header {
max-height: 380px;
padding: 50px 25px 0;
border: none;
}
.title {
font-size: 1.3em;
border: none;
}
h1 {
font-size: 5rem;
line-height: 1.1;
}
.arrow {
display: none;
}
.intro {
font-size: 1rem;
}
}
1 Answer
Steven Parker
231,248 PointsIn the first rule of the second media query, there's a colon missing after the property name "padding".
CSS is notorious for just silently failing if it encounters a syntax error.
Preston Chandler
Front End Web Development Techdegree Student 7,405 PointsPreston Chandler
Front End Web Development Techdegree Student 7,405 PointsEdit: i found that i was missing the end bracket in the float clearfix section. Once i added it, the code worked like magic. Thanks again for your help!
Great catch! Although, my code still isnt working as it should. Still appears that neither of the media queries are doing what they should. Full snippet of my code below. Thoughts?