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 Adding Breakpoints for Devices

Jeffie Gable
PLUS
Jeffie Gable
Courses Plus Student 2,635 Points
Posted by Jeffie Gable
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
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
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
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
Jeffie Gable
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?