Question on Responsive, Adaptive, Fluid, Fixed

Depending on your browser, you'll want to look at the CSS. Firefox has a nifty little extension you can download called FireBug, and Chrome will allow you to view the code in Tools >> Developer tools. CSS cascades, and will override other CSS rules based on specificity, which you'll learn more about later, but at the beginning can cause some confusion.

Is your grid converted to percentages entirely, or did you also leave in the fixed width amounts?

Seeing your code would help a lot here.

You can put your HTML and CSS in the forum following one of these options https://teamtreehouse.com/forum/how-to-type-code-in-the-forum

Thanks for the prompt response. I've actually been working in Firefox for the most part, but think I'm going to have to switch back over to chrome shortly in order to make use of the screen size add-on there. Thanks for that link on how to insert code into comments. So. Here it goes.

 /*
 Width: 1000px
 # Columns : 12 
 Column width: 65px
 Gutter : 20px 
*/
/*The formula used to achieve the percentages was:
            target/context = result

 In this case, in order to achieve the percentages, we then had to multiply by 100.*/

.grid_1 { width: 6.5%; } /*65px*/
.grid_2 { width: 15.0%; } /*150px*/
.grid_3 { width: 23.5%; } /*235px*/
.grid_4 { width: 32.0%; } /*320px*/
.grid_5 { width: 40.5%; } /*405px*/
.grid_6 { width: 49.0%; } /*490px*/
.grid_7 { width: 57.5%; } /*575px*/
.grid_8 { width: 66.0%; } /*660px*/
.grid_9 { width: 74.5%; } /*745px*/
.grid_10 { width: 83.0%; } /*830px*/
.grid_11 { width: 91.5%; } /*915px*/
.grid_12 { width: 100%; }

.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11,
.grid_12 {
    margin: 0 2% 1% 0;
    float: left;
    display: block;
}

.alpha{margin-left:0px;}
.omega{margin-right:0px;}

.container{
    width: 90%;
    max-width: 1000px; 
    margin: auto;
}



.clear{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0}.clearfix:after{clear:both;content:' ';display:block;font-size:0;line-height:0;visibility:hidden;width:0;height:0}* html .clearfix,*:first-child+html .clearfix{zoom:1}

As you can see, all of the code in my grid.css (except for .container and .alpha and .omega) has been converted to percentages. With the exception of a couple of fonts in my style.css sheet, though, all the sizes remain in px. I don't know if it's my style.css that's causing the problem, but I don't think so.

Have you tried re sizing your browser? It's been so long since I've done that code challenge. Nothing is jumping out at me as being wrong.

What does your HTML look like?

Also, personally, I like to develop in Firefox more than I do Chrome. Chome is great for the for the console, but in Firefox, go to the tools dropdown >> web developer >> Responsive Design view

Using that option is far superior for designing responsibly than anything I have seen Chrome do.

I also prefer Firebug over Chrome's native code and css view as well. I may be missing extensions that would allow Chrome to do the same, as easily.

The divs are responding for me when I resize the viewport. When you resize, is your content running off of the screen?

No worries about having not looked at the developer tools much. Your workflow, and the tools you use will grow as your knowledge does. We all started new.

Take a look at this http://codepen.io/kevink/pen/xtAmp

Missing the pics for the site but it looks like it is acting responsive to me.

http://codepen.io/Bluediv/pen/uozgI

Kevin Korte you see something I am missing?

It appears responsive to me too. That is what that block of code should be doing. We'll have to wait and see what Devin thinks.

Hello again -

I've tried my code on a different computer and that one seems to be working. I'm having a bit of a design problem, but I think that as I go further along, I'll be able to figure that one out. It seems that the problem with having a fluid foundation is with my computer, which is troubling. It means that as I go through the next few lessons, I won't really be able to test what I'm coding on my own computer and will have to use another to see if I'm getting it right, which is kind of lame. I think I'm going to go on some forums and see if anyone else is having this kind of trouble with their computer.

Thanks for all the help!

ooh yeah I can't remember the specifics but that . in your doctype declaration messing up the interpreter, I know in IE it puts it in quirk mode which would negate a lot of the css, Firefox and Chrome do the same type of thing. I will try to look it up when I get home.

Kevin Korte I bet this is why it was rendering ok in Codepen :)