Problems with changing from desktop to mobile screens

[johned]

I have been having issues with adding media queries. The mobile versions are fine (which I included six media queries from 320px-700px. It is once I add the desktop version the problems arise. The code is going to be different for the desktop version from the mobile version so I did “display: none;” for all the code that is only for the desktop version on the mobile screens. This worked fine. The problem is once I get to the desktop version (screen width 768px). When I do “display: none;” for all the mobile parts on the desktop version some of the parts disaper and stay on the mobile version but a lot (such as the <h> and .paypalbutton1) also causes them to be removed from mobile version and I dont understand why. Right now all the mobile code falls below the desktop code on the desktop screens because as I said once I delete the mobile parts on the desktop screens it also causes it to be deleted from the mobile version. The CSS desktop code is on lines 0-92. The CSS mobile code is on lines 94-305. I used two screen sizes for an example that has both the desktop and mobile code on it, one desktop version (screen size 768px) lines 309- 402 for the desktop version and lines 405-601 for the mobile version. I also have one mobile version (screen size 600px) lines 604-665 for the desktop version and lines 667-863 for the mobile version. I have attached the code below- What is the reason for the issues I am facing?
http://codepen.io/Johned22/pen/vKzAyd
Thanks in advance

[Beverleyh]

I suspect the reason why folks are not as forthcoming with help here as other posts, is the same reason already highlighted by Shikkediel in your related post https://css-tricks.com/forums/topic/media-query-problem/ … there is simply too much markup and CSS to expect others to comfortably, quickly and easily process/troubleshoot on your behalf.

At first glance, it looks like your media queries aren’t closed properly. An extra few closing curly braces in the appropriate spots may be all that’s needed to fix your problems. If not, it looks like you’ll have to strip everything right back to basics; For us here that means not complete web pages, but a handful of test elements and a handful of related CSS. Your problem should be condensed to a dozen or so lines to outline to us your understanding of how your media queries are being used.

In stripping back your demo, it is likely that you will identify the problem in order to fix it yourself.

Unfortunately, the amount of content you’ve provided so far is too much and will put people off.

[Author]

Posts