Having problems with media queries

Max-width is telling the browser that you want the rules in the query to apply to screen sizes 768px or less. If you want the rules to apply to screens 768px or greater, you should write min-width in the media query instead.

Just fixed the link. Sorry about that

Thanks for the response. When I set the 768px screen to min-width it caused all the smaller screens to display all the parts I only want for larger screens. Should I set each screen to min-width?

Going through the code where you're using max-width, it looks like you're repeating style rules that you don't have to. If you add a media query that says for example that you want all images to disappear at 700px or below, you only have to declare that in the 700px media query. You don't have to redeclare it at small screen sizes because the 700px media query covers those. In what you have now, it looks like you created your styles for large screens first and are modifying at smaller style. It would simplify your code if you set the styles you want for mobile first, and then use min-width media queries to add the styles you want on larger screen sizes. But if you don't want to do that, you can continue to use max-width for the styles you want to apply to a smaller screen sizes. Does that answer your question? The stylesheet is quite large so I can't go through very closely to say for sure what each of your styles is doing, so my answer is a bit general.

Thanks for your response. I just still dont understand when I do min-width 768px for example even though I did media quierys for 700px, 600px etc they seem to be voided out. I would have thought the smaller screen sizes would still stay the same but when I did min-width 768px all the content from the smaller screen sizes are also voided. What could be the problem? I know its is something around the 768px point because it all works fine until I add this is media query. Thanks

I ran your CSS through an validator (https://jigsaw.w3.org/css-validator/validator) and it showed a parsing error on your media queries. You're missing the closing curly bracket } at the end. You should close your media query after the last rule for that screen size. Check the snippet below the syntax. Hope that fixes it!

@media screen and (max-width: 768px) {
     p {
            color: #000;
       }
}

I really appropriate all your help. I am still having trouble though and no matter how I play around with it, it does not work and I dont understand why. I attached the HTML code and the CSS with media queries max-width 500px, max-width-700px, and max-width- 768px. The max width 768px should have a slightly different outline. The issue is parts of the code is missing even though I have not edited it from my last copy. For example for the 768px width on lines 407-433 none of that info shows up. Also on the smaller screens (700px and 500px) <h1> to <h5> does not show up. Also the buy now button (line 753) does not show up. I just dont understand what I am missing for somethings to show up and other things to not show up at all. http://codepen.io/Johned22/pen/vKzAyd