0

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 :(

THE PROBLEM

The content floats to the left as it should, so multiple divs across the page now float to be one on top of the other. The issue is their width does not resize. They overflow across the window so you have to scroll right.

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...

NOTE 2: The header is clearly in the masterpage coding while the div's contained in the content-container was put in there using the script editor. But it's strange as all the content within script editor is being affected by my CSS AND JavaScript found in the masterpage...what's going on?

Improve this question
6
  • Are you resizing the browser window or checking in a real device? There is a difference!
    – Arsalan Adam Khatri
    Nov 15, 2017 at 11:38
  • Hi Arsalan - Both! :) Neither works.
    – Anniesoptera
    Nov 15, 2017 at 11:46
  • ps, The content floats to the left as it should, so multiple divs across the page now float to be one on top of the other. The issue is their width does not resize. They overflow across the window so you have to scroll right.
    – Anniesoptera
    Nov 15, 2017 at 11:49
  • Is it something to do with min-width you have given in #wrapper CSS
    – Arsalan Adam Khatri
    Nov 15, 2017 at 11:53
  • 1
    The thing is, when I apply this code on an HTML file not in sharepoint, it works. there must be something within sharepoint stopping this specific code from working...Can't figure out what yet...
    – Anniesoptera
    Nov 15, 2017 at 13:34

1 Answer 1

Reset to default
2

Got it!

I fixed it by finding out the div that SharePoint uses to contain the Script Editor snippets - in my case .ms-rte-embedwp and added extra code that matches my .container code! This fixed the issue!

Improve this answer
0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.