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

HTML How to Make a Website Responsive Web Design and Testing Write CSS Media Queries

Posted by wdgbmakhef
wdgbmakhef
712 Points

kindly 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.

css/main.css 
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
wdgbmakhef
712 Points

ohhh! dear i got it, i was just using the code without semi column at the end of break point aliment

Venkataraman Ganesan
Venkataraman Ganesan
5,679 Points
Venkataraman Ganesan
Venkataraman Ganesan
5,679 Points

Use a media query to set a minimum width of 480px, inside the code block, set the font size of h1 to 2.5em.

wdgbmakhef
wdgbmakhef
712 Points
wdgbmakhef
wdgbmakhef
712 Points

i have write like this at the bottom of page,

@media screen and (min-width: 480) { h1 { font-size: 2.5em; } }

Venkataraman Ganesan
Venkataraman Ganesan
5,679 Points
Venkataraman Ganesan
Venkataraman Ganesan
5,679 Points

You 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
wdgbmakhef
712 Points
wdgbmakhef
wdgbmakhef
712 Points

but i can not understand will you like to help to me with written css file

Justin Hicks
Justin Hicks
14,290 Points
Justin Hicks
Justin Hicks
14,290 Points

I 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
wdgbmakhef
712 Points
wdgbmakhef
wdgbmakhef
712 Points

still it says that

did you change the h1 font-size to 2.5em for devices larger than 480px?