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

Cristy Balch
Cristy Balch
780 Points

My browser window won't go smaller than the 480px mark so I can't see if the background will switch back to white.

When testing my browser window after applying the breakpoints, I realized that my browser window won't minimize enough for me to check and see if the background will turn back to white again. I'm sure its something in my code, I just don't know where to look. Would it be in the main.css file?

Hi Cristy,

Can you post your code please (here's a how-to guide) and we'll take a look? :)

Thanks

-Rich

Cristy Balch
Cristy Balch
780 Points

My apologies Rich; I'm pretty new at this... I'm not sure what I'm looking at in your "here's a how-to guide...

Cristy Balch
Cristy Balch
780 Points
/************************
GENERAL 
**************************/


body {
  font-family: 'Open Sans', 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;
}


/************************
HEADING
**************************/


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: 'Changa One', sans-serif;
  margin: 15px 0;
  font-size: 1.75em;
  font-weight: normal;
  line-height: 0.8em;
}

h2 {
  font-size: 0.75em;
  margin: -5px 0 0;
  font-weight: normal;
}


/************************
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: 800;
  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: #bdc3c7;
}

#gallery li a p {
  margin: 0;
  padding: 5%;
  font-size: .75em;
  color: #bdc3c7
}

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

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


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

.contact-info {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: .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;
}

.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.twitter a {
  background-image: url('../img/twitter.png');
}

/************************
COLORS
**************************/


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

/* green header*/
header {
  background: #6ab47b;
  border-color: #599a68;
}

/* nav bkgd on mobile devices */
nav {
  background: #599a68;
}

h1, h2 { 
  color: #fff;
} 

/* links */
a {
  color: #6ab47b;
}


/*nav link */
nav a, nav a:visited {
  color: #fff;
}
/*selected nav link */
nav a.selected, nav a:hover  {
  color: #32673f;
}

Hi Cristy,

Sorry I should have explained; the link I'd added was showing you how to use markdown to format your code when adding it to posts.

To do so, add 3 back ticks (```) followed by the language, e.g. html on the first line. Starting on the next line add the code and then finally on a new line add 3 more back ticks. This will display the code like this:

p {
    color: #FFF;
}

Regarding the question, it's odd that your browser won't allow you to check it at 480px. The CSS you've added doesn't look to have any media queries in it though. Looking at this video at around the 1:35 Nick mentions a responsive.css file. Do you have this setup?

-Rich

Cristy Balch
Cristy Balch
780 Points

Hi Rich! Thanks for clarifying. So I had posted my main.css. Here's the responsive.css code ''' @media screen and (min-width: 480px) { body { background: navy; } }

@media screen and (min-width: 660px) { body { background: darkgreen; } } '''

3 Answers

Jeremy Hogan
Jeremy Hogan
15,451 Points

Assuming you're using Chrome on a Mac, Chrome won't size below 400px with the viewport. There are a few ways around this. You can use the side-by-side view in developer tools to get the viewport below 400px. http://stackoverflow.com/questions/8681903/browser-doesnt-scale-below-400px#answer-11967837

You can also use developer tools and click on the mobile icon in the upper left of the developer icon tray. You will have to refresh the page but, as long as the developer tool window is open, it will then render as different mobile devices (you can select options). Just click the mobile icon again to remove.

Cristy Balch
Cristy Balch
780 Points

Hi Jeremy, Thank you for your response. That's interesting about different browser and their viewport sizes. I am actually using Safari on a Mac, but same issue. I'm just glad it wasn't something I was doing wrong! Thanks for your advice on using the developer tools.

Stephen Boykin
PLUS
Stephen Boykin
Courses Plus Student 106 Points

I have the same problem with Safari not being able to scale down small enough. Even before the media queries it wasn't scaling down that small. There must be some sort of minimum size preference in the browser that we can't get to. I've looked everywhere. I ended up changing the min-width to 520px temporarily to make sure our coding is working and it is working just fine.

Just to let you know you weren't the only one.

One more thing. If I turn on the sidebar it is able to scale down smaller and works fine. It's just that the sidebar is quite distracting.