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
Dinesh Kumaar Rajendran
3,395 PointsNeed help solving media query issue for H1 , only that doesnt work
```<h2 class="title">Journey through the Western Ghats Mountains</h2>
<h1 class="heading-1">Udhagamandalam,Tamilnadu</h1> ```
Css
@media (max-width:768px){ .primary-content,.secondary-content,.wildlife{ width: 100%; padding: 20px; border: none; }
.main-header{
max-height: 380px;
padding: 50px 25px 0;
font-size: 5rem;
line-height: 1.1;
}
.title{
font-size: 1.3rem;
border: none;
}
h1{
font-size: 5rem;
line-height: 1.1;
}
}
3 Answers
Adam Beer
11,314 PointsThe order is wrong. First you write the normal parameters. Second, after all use the @media query. Like this,
CSS
.main-header{
max-height: 380px;
padding: 50px 25px 0;
font-size: 5rem;
line-height: 1.1;
}
.title{
font-size: 1.3rem;
border: none;
}
h1{
font-size: 5rem;
line-height: 1.1;
}
@media (max-width:768px){
.primary-content,
.secondary-content,
.wildlife{
width: 100%;
padding: 20px;
border: none;
}
Dinesh Kumaar Rajendran
3,395 Pointsits my bad , this not the complete code i already have the H1 , Title , main-header as plain css selector . i want them to be responsive so i added inside the media queries and added few selectors so that they are responsive . here i go with full code .
Dinesh Kumaar Rajendran
3,395 Points*{
box-sizing: border-box;
}
body {
color:#878787;
margin: 0;
font-family:Verdana,Arial, Helvetica, sans-serif, Geneva, Tahoma, sans-serif;
}
.main-header {
height: 800px;
background:linear-gradient(#ffa949,transparent 90%),
linear-gradient(0deg ,#fff,transparent ),
orange url("../img/mountain.jpeg") no-repeat center;
background-size: cover;
}
.title {
color:white;
font-size: 26px;
text-shadow: 5px 8px 10px #222;
text-transform: uppercase;
font-weight: normal;
line-height: 1.3;
padding-top: 100px;
text-align: center;
margin: auto;
border-bottom: 2px solid white;
width:50%;
padding-bottom: 15px;
}
.heading-1 {
font-size:60px;
color:white;
text-shadow: 5px 8px 10px #222;
text-transform: uppercase;
font-weight: normal;
line-height: 1.3;
padding-top: 100px;
text-align: center;
margin: 12px 0 0;
}
h2{
font-size: 3.3125; /*53/16*/
margin-bottom: .5em; /*26px*/
}
h3{
font-size: 1.25em;
color: #48525c;
line-height: 1.2;
margin-bottom: 1.7em; /*34px*/
}
.primary-content {
text-align: center;
}
.secondary-content {
width: 75%;
padding-top: 50px;
overflow: auto;
margin: auto;
}
.primary-content
{
width: 75%;
margin:auto;
max-width: 100%;
padding-left: 50px;
padding-right: 50px;
}
.t-border{
border-top: 2px solid grey;
}
.callout{
font-size: 1.25em;
padding: 0 9px 13px 3px;
margin-top: 20px;
display: inline-block;
border-bottom: 3px solid #ffa949;
}
#main-footer{
padding-top: 60px;
padding-bottom: 60px;
border-bottom: solid 10px orange;
border-top: solid 3px grey;
width: 100%;
margin: auto;
}
a:link{
color:rgb(255, 169, 73);
text-decoration: none;
}
a:visited{
color:goldenrod;
}
a:hover {
color:rgba(255, 169, 73,.4);
}
a:active{
color:lightcoral;
}
/* li {
display: inline-block;
padding: 0 12px;
border-right: solid 1px black;
} */
.wildlife{
color:white;
background-color: #434a52;
padding-top: 100px;
padding-right: 120px;
padding-bottom: 100px;
padding-left: 120px;
border-width:10px;
border-style: solid ;
border-color: #ffa949;
margin-top: 100px;
margin-right: auto;
margin-left: 100px;
margin-bottom: 100px;
width: 75%;
background-image: url(../img/bear.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
box-shadow: 10px 8px 12px 10px rgba(0, 0, 0,.4);
border-radius: 10px;
}
.bird{
width: 50px;
margin-left: 700px;
}
.resorts{
background-size: cover;
width: 75%;
max-width: 100%;
border-radius: 10px;
}
.chairs{
background-size: cover;
width: 75%;
max-width: 100%;
border-radius: 10px;
}
.for-floats-1{
width: 50%;
float:left;
}
.for-floats-2{
width: 50%;
float: right;
}
#main-footer{
text-align: center;
}
.group::after{
content: "";
clear: both;
display: auto;
}
@media (max-width:1024px){
.primary-content,.secondary-content{
width: 90%;
}
.wildlife{
padding: 10px 12px;
margin: 50px 0 20px;
}
}
@media (max-width:768px){
.primary-content,.secondary-content{
width: 100%;
padding: 20px;
border-top: none;
}
.main-header{
max-height: 380px;
padding: 50px 25px 0;
}
.title{
font-size: 1.3rem;
border: none;
}
h1{
font-size: 0.9rem;
line-height: 1.1;
}
.bird{
display: none;
}
.into{
font-size: 1rem;
}
.for-floats-1,.for-floats-2{
float: none;
width: 100%;
}
#main-footer{
padding: 20px 0;
}
}
Dinesh Kumaar Rajendran
3,395 PointsDinesh Kumaar Rajendran
3,395 Pointsi didn't get your point , you want me push the elements out of media query ? can u explain a bit ?
Adam Beer
11,314 PointsAdam Beer
11,314 PointsDo you see the difference? You started with the media query, but this is the wrong way. First, the plain settings are met, and after then the media query. CSS @media Rule
//This is your way.
//And this is my tip