I have CSS that works PERFECTLY outside of SharePoint but the moment I put it into SharePoint, it seems to break.

Funny thing is, it only breaks when the width is smaller than that of a tablet – so basically only Mobile view! The Responsive RS-Menu (main menu at the top) works great too, even in mobile view. But my content does not work 🙁

Here’s the code:

HTML

<div id="s4-workspace"> <div id="s4-bodyContainer"> <div id="wrapper" class="clearfix">             <div id="header" style="background-color:#363839;">        <div class="container clearfix">          RESPONSIVE MENU! WORKS REALLY WELL ALWAYS        </div>     </div>     <div id="content">        <div class="content-wrap">            <div class="container clearfix">                 CONTENT! DOES NOT RESIZE :(            </div>        </div>     </div>     ... 

CSS

@media only screen and (max-width: 479px) {  #s4-container #s4-bodyContainer #wrapper {     width: 100% !important;     margin: 0 auto;     min-width: 320px; }  .container { width: 280px; }  #header .container { width: 100%; }  } 

NOTE: I basically have similar code for the following:

@media only screen and (max-width: 767px) {  @media only screen and (min-width: 768px) and (max-width: 979px) { 

and all of them work! It’s just when the width is less than 767px do I have problems…