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 trialwdgbmakhef
712 Pointskindly help me to solve this one
Create a breakpoint for devices 480 pixels wide or larger. Inside the breakpoint, set the h1 font-size to 2.5em.
a {
text-decoration: none;
}
#wrapper {
max-width: 940px;
margin: 0 auto;
}
#logo {
text-align: center;
margin: 0;
}
h1, h2 {
color: #fff;
}
nav a {
color: #fff;
}
nav a:hover {
color: #32673f;
}
h1 {
font-family: Changa One, sans-serif;
font-size: 1.75em;
font-weight: normal;
}
img {
max-width: 100%;
}
#gallery {
margin: 0;
padding: 0;
list-style: none;
}
#gallery li {
float: left;
width: 45%;
margin: 2.5%;
background-color: #f5f5f5;
color: #bdc3c7;
}
nav ul {
list-style: none;
margin: 0 10px;
padding: 0;
}
nav li {
display: inline-block;
}
nav a {
font-weight: 800;
padding: 15px 10px;
}
.profile-photo {
display: block;
margin: 0 auto 30px;
max-width: 150px;
border-radius: 100%;
}
.contact-info {
list-style: none;
padding: 0;
margin: 0;
font-size: 0.9em;
}
.contact-info a {
display: block;
min-height: 20px;
background-repeat: no-repeat;
background-size: 20px 20px;
padding: 0 0 0 30px;
margin: 0 0 10px;
}
7 Answers
wdgbmakhef
712 Pointsohhh! dear i got it, i was just using the code without semi column at the end of break point aliment
Venkataraman Ganesan
5,679 PointsUse a media query to set a minimum width of 480px, inside the code block, set the font size of h1 to 2.5em.
wdgbmakhef
712 Pointsi have write like this at the bottom of page,
@media screen and (min-width: 480) { h1 { font-size: 2.5em; } }
Venkataraman Ganesan
5,679 PointsYou use media queries to make the website responsive, breakpoints are the browser window sizes at which you want the website to change how it displays content eg, show or hide some elements, increase or decrease font size, change color, anything you want to do with styles, it can be done.
For this example, the idea is to change the font size of h1 when the browser has a minimum width of 480px, that is for all cases when the browser width is 480px or larger you modify the h1 tag
Media queries can be written as @media (min-width : value){.....} and change the font size of h1 inside the media query. Add this to the end of the given css.
wdgbmakhef
712 Pointsbut i can not understand will you like to help to me with written css file
Justin Hicks
14,290 PointsI believe this is what your looking for. Just got to the very bottom of your style sheet and put this
/******** Media Query *******/
@media screen and (min-width:480px) { h1 { 2.5 em; } }
wdgbmakhef
712 Pointsstill it says that
did you change the h1 font-size to 2.5em for devices larger than 480px?