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

CSS How to Make a Website Responsive Web Design and Testing Refactor the Layout

Posted by alexarinze
alexarinze
5,937 Points

How do make the browser wider than 480 px

anyone know??

css/main.css 
  #primary {
width: 50%;
}
#secondary {
  width: 40%;
  float: right;
}
#gallery li {
  width: 28.3333%;
}

#gallery li:nth-child(4n) {
 clear: left; 
}

  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;
}

@media screen and (min-width: 480px) {

}

2 Answers

rydavim
rydavim
18,814 Points
rydavim
rydavim
18,814 Points

You don't need to do anything regarding browser width for the first part of the challenge. They have already written the media query for you.

// This is at the bottom of the CSS file in the challenge.
@media screen and (min-width: 480px) {
  // Your code for the first part of the challenge goes in here.
}
Kern Tallett
Kern Tallett
10,012 Points
Kern Tallett
Kern Tallett
10,012 Points

I am unsure exactly what question you are asking. To get a desktop browser greater than 480px just make full screen. If you mean for media queries then you have done it. I would assume you wish to have the media query run when the browser is at 480px which would then require you to use max width instead of min width.