the responsive. css code doesn't work.

2 Main things I would check first,

Your content should be wrapped inside a media query, and in your html file, you should link your responsive.css file in the correct location.

How to add a snapshot? thank you!

Aishu Thank you!

https://w.trhou.se/s236ot99po

Your left and right content should wrapped it follow by css code "overflow: Auto;" then use media querie. For more information about responsive design check out on the library programs of treehouse.

sorry about my english :) but anyway, i saw your code on your responsive.css your "#primary" and "#secondary" are still acting like a whole page in any mobile devices because of your width percentage and float things. In the big screen this is fine because you have a full access vision on every each content of your web, we are talking about more than 1024x768 screen, every screen devices will consider as 100% width such as mobile, tablet, laptop, and desktop. So if you declare 50% on the left and right on responsive and you use your mobile let say 320 to 480 width of mobile screen this will consider as 100% and your float are still right and left it will be more smaller, the way you look on the big screen will be the same on the smaller screen.

On my responsive code sample, you will notice the width is 100% because we are relying on the full screen of mobile device so that's why it is 100% if we declare it to 50% it will just show half screen on your mobile device and float are all left, because the content is 100% all content will automatically move down.

Just sharing what I know <thumbs-up> XD.... Check my sample:

HTML

<div class="wrapped">
     <div class="leftContent">
          <!-- Your left content code here -->
     </div>
     <div class="rightContent">
          <!-- Your right content code here -->
     </div>
</div>

CSS

.wrapped {
overflow: auto;
width: 100%;
height: 250px; /* you can change this to "auto" */
}
.leftContent {
float: left;
margin-left: 0%;
width: 50%;
height: 250px; /* you can change this to "auto" */
background-color: #4c4c4c;
}
.rightContent {
float: right;
margin-right: 0%;
width: 50%;
height: 250px; /* you can change this to "auto" */
background-color: #FFCC33;
}

Responsive.css

@media only screen and (min-width: 480px) and (max-width: 639px) {
     .leftContent {
          float: left;
          width: 100%;
     }
     .rightContent {
          float: left;
          width: 100%;
     }
}

You can do also:

     .leftContent, .rightContent {
          float: left:
          width: 100%;
     }

Hope it helps :) again sorry about my English... Good Luck