Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS How to Make a Website Responsive Web Design and Testing Adding Breakpoints for Devices

Jeffie Gable
PLUS
Jeffie Gable
Courses Plus Student 2,635 Points

Why is my browser width to wide?

Hey All,

When I minimise my browser to a smaller size to mimic the Smart Phone screen its width is too wide so the break point is already active. In other words, once I added the media query background colour I noticed that it was blue before I enlarged it to see the breakpoints.

Jeffie Gable
Jeffie Gable
Courses Plus Student 2,635 Points

Sorry :)

body {
  font-family: 'signika', sans-serif;
}

#wrapper {
  max-width: 940px;
  margin: 0 auto; 
  padding: 0 5%;
}

a { 
  text-decoration: none;
}

img{
  max-width: 100%;
}

h3 {
  margin: 0 0 1em 0;
}



/*******************************
NAVIGATION
********************************/

nav {
  text-align:center;
  padding: 10px 0;
  margin:20px 0 0;
}

nav ul {
  list-style: none;
  margin: 0 10px;
  padding: 0;
}

nav li {
  display:inline-block;
}

nav a {
  font-weight: 700;
  padding: 15px 10px;
}






/*******************************
FOOTER
********************************/

footer {
  font-size: 0.75em;
  text-align: center;
  clear:both;
  padding-top: 50px;
  color:#ccc;
}

.social-icon {
  width: 20px;
  height: 20px;
  margin: 0 5px;
}



/*******************************
PAGE: PORTFOLIO
********************************/

#gallery {
    margin: 0;
    padding: 0;
    list-style: none;
  }

#gallery li {
  float: left;
  width: 45%;
  margin: 2.5%;
  background-color: #f5f5f5;
  color: #bdc3cf;
}

#gallery li a p {
  margin: 0;
  padding: 5%;
  font-size: 0.75em;
  color: 002966;
  font-family: 'karla', sans-serif;
}


/*******************************
PAGE: CONTACT
********************************/

.contact-info {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.9em;
}

.contact-info li.phone a {
  background-image: url('../img/phone.png');
}

.contact-info li.mail a {
  background-image: url('../img/mail.png');
}

.contact-info li.facebook a {
  background-image: url('../img/facebook.png');
}

.contact-info a {
  display: block;
  min-height: 25px;
  background-repeat: no-repeat;
  background-size: 20px 20px;
  padding: 0.5px 0 0 30px;
  margin: 0 0 10px;
}


/********************************
HEADER
********************************/

header {
  float: left;
  margin: 0 0 30px 0;
  padding: 5px 0 0 0;
  width: 100%;
}

/* logo text */ 
#logo {
  text-align: center;
  margin: 0;
}

h1 {
  font-family: 'karla', sans-serif;
  text-decoration: underline;
  margin: 15px 0;
  font-size: 2.2em;
  font-weight:normal;
  line-height:1.0em;
  padding:15px 0;
  text-align:center;
}

h2 {
  text-decoration: none;
  margin: -5px 0 0;
  font-weight:80em;
  line-height:1.0em;
  font-size:1.2em; 
  text-align:center;
}

/* blue header */
header {
  background: #248FB2;
  border-color: #D3E9F0;
}

/********************************
PAGE: ABOUT
********************************/

.profile-photo {
  display: block;
  max-width: 150px;
  margin: 0 auto 30px;
  border-radius: 100%;
}

/********************************
COLOURS
********************************/


/* site body */
body {
  background-color: #fff;
  color: #999;
}

/* logo text */
h1, h2 {
  color: #fff;
}

/* nav background on mobile */
nav {
  background: #D3E9F0;
}

/* links */
a {
  color: #248FB2;
}

/* nav link */
nav a, nav a:visited { 
  color: #fff;
}

/* selected nav link */
nav a.selected, nav a:hover {
  color: #002966;
}
Jeffie Gable
Jeffie Gable
Courses Plus Student 2,635 Points
@media screen and (min-width: 480px) {
  body {
    background: navy;
  }
}

3 Answers

Blake Lieberman
Blake Lieberman
23,772 Points

Oh you mean too wide. If you are using chrome,

use the inspector and click on the mobile phone icon next to the search icon in the upper left corner.

Jeffie Gable
PLUS
Jeffie Gable
Courses Plus Student 2,635 Points

Thanks for that, I didn't know I could do that. But when I go on with my actual Iphone it is still blue?