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
Cindy Lea
Courses Plus Student 6,497 PointsCSS Media Queries
I copied the code just like in the video, but I dont get the royalblue color at all when I shrink the screen. Did I have to do something in the html file (video didnt say anything).
/* Media Queries -------------------- */
@media (max-width: 960px) { body { background: royalblue; } p { color: white; } }
4 Answers
jsdevtom
16,963 PointsPaste your code in a codepen because there is probably an error in another part of your code. Is your media query at the bottom?
Cindy Lea
Courses Plus Student 6,497 Points/* 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;
text-shadow: 0 1px 1px rgba(0,0,0,.8);
margin: 12px 0 0;
/ text-shadow: -5px -8px 0px #222; /
/
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);
*/
text-shadow: 0 1px 1px rgba(0,0,0, .8);
}
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;
/* background-image: radial-gradient(circle at top right,#ffa949 0%, firebrick 60%, dodgerblue 120%);/ / background-image: linear-gradient(90deg, #ffa949, firebrick);*/ }
.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, 1); border-radius: 10px; /* border-radius: 50%; width: 500px; height: 500px; / / border-radius: 50px 10px;/ / border-radius: 50px 10px 50px 10px;*/
/* border-top-left-radius: 50px; border-top-right-radius: 10px; border-bottom-right-radius: 50px; border-bottom-left-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 Queries -------------------- */
@media (max-width: 960px) { body { background: royalblue; } p { color: white; } }
@media (max-width: 480px) { body { background: darkred; } }
David Tonge
Courses Plus Student 45,640 Points960px still counts as desktop. So if you're at least targeting Tablet etc would be like 768px and below. That value isn't set in stone but 960 is still around desktop size.
Cindy Lea
Courses Plus Student 6,497 PointsI tried all different sizes & it didnt work. My guess theres an error elsewhere in code.
Cindy Lea
Courses Plus Student 6,497 PointsI copied the final css file & added my queries to the end & it works with the queries now. The main difference I saw is my file had @font-face section & the arrow section didnt have a top border (wont affect the workings of this code though) & other small things. Wish I could really pinpoint the culprit from a learning standpoint : (
jsdevtom
16,963 PointsThe (most likely) culprit: "CSS is read from top to bottom. If two rules are valid, the rule that is set last, is the one that will be executed."
Hence if there is a rule targeting, body { background: royalblue; } p { color: white; } after the media queries, it will override the media queries.
This article makes media queries easier.
codepen is here. Just click the 'new pen' button in the top right and paste the necessary code in there. Then save, then paste your link in the forum :-)
Cindy Lea
Courses Plus Student 6,497 PointsCindy Lea
Courses Plus Student 6,497 Pointswhere is the codepen?