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 Debugging HTML and CSS Problems Use Developer Tools

Shandale Shelton
Shandale Shelton
7,424 Points
Posted by Shandale Shelton
Shandale Shelton
7,424 Points

Responsive design for web page is not responding.

Hello I believe that I am stuck i have entered the code exactly as instructed and no change to my web page for the responsive design. I know its a bug in here some where I just can't find it. please help!

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

/************************* TWO COLUMN LAYOUT ***************************/

#primary { width: 50%; float: left; }

#secondary { width: 40%; float: right; }

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

#gallery li { Width: 28.3333; }

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

/*************************

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

.photo { float: left; margin: 0 5% 80px 0; }

} @media screen (min-width: 660px) {

/*************************

PAGE: HEADER ***************************/

nav {
  background: none;
  float: right;
  font-size: 1.125em;
  margin-right: 5%;
  text-align: right;
  width: 45%;
}

#logo {
  float: right;
  margin-left: 5%;
  text-align: left;
  width: 45%;

}


h1 {

  font-size: 2.5em;

}

h2 {
  font-size: 0.825em;
  margin-bottom: 20px;
}

header {
  border-bottom: 5px solid #599a68;
  margin-bottom: 60px;

}

}

1 Answer

Jake Salo
Jake Salo
13,175 Points
Jake Salo
Jake Salo
13,175 Points

Hi Shandale, your code looks fine at first glance - the first thing that popped out to me was in your 'page portfolio' section.

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

#gallery li { Width: 28.3333; }

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

The fact that width is capitalised shouldn't affect it, but change it anyway just to be safe. But the main bit being that you didn't include any units for the value - 28.3333px? %? 

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

#gallery li { width: 28.3333[UNIT]; }

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

Try changing these and tell me if this works, if not i'll have a deeper look at your code :)

Good luck.

Shandale Shelton
Shandale Shelton
7,424 Points
Shandale Shelton
Shandale Shelton
7,424 Points

Thanks Jake for getting back to me I really appreciate it. looks like those changes didn't have a affect on the web page i tried retaking my steps to go along with the video but no luck.

Jake Salo
Jake Salo
13,175 Points
Jake Salo
Jake Salo
13,175 Points

Alright then, the next thing i just noticed is that you didn't include the 'and' keyword in the 660px media query: 

@media screen (min-width: 660px) {

Try adding the 'and' keyword between screen and open parentheses:

@media screen and (min-width: 660px) {
Shandale Shelton
Shandale Shelton
7,424 Points
Shandale Shelton
Shandale Shelton
7,424 Points

That looks like that has done the trick thank you sir!