We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
    • 50161
    • 5 Posts
    Sorry I've gotten into this program just a few days ago.
    Can anyone tell me how you actually hide 2 sections on the homepage from being viewed on a mobile device?
      • 42562
      • 1,145 Posts
      donshakespeare Reply #2, 9 years ago
      From being viewed? or from loading in the first place?
      Use CSS for the former and another thing for the latter.
        TinymceWrapper: Complete back/frontend content solution.
        Harden your MODX site by passwording your three main folders: core, manager, connectors and renaming your assets (thank me later!)
        5 ways to sniff / hack your own sites; even with renamed/hidden folders, burst them all up, to see how secure you are not.
        • 50161
        • 5 Posts
        Quote from: donshakespeare at Mar 27, 2015, 04:32 PM
        From being viewed? or from loading in the first place?
        Use CSS for the former and another thing for the latter.

        From being viewed on a mobile device.
          • 50161
          • 5 Posts
          Quote from: cwestcott at Mar 27, 2015, 05:42 PM
          Quote from: donshakespeare at Mar 27, 2015, 04:32 PM
          From being viewed? or from loading in the first place?
          Use CSS for the former and another thing for the latter.

          From being viewed on a mobile device.

          Can you help me identify where the CSS is and where I find the right part? I am a total amateur at this!
            • 42562
            • 1,145 Posts
            donshakespeare Reply #5, 9 years ago
            Show me a page and I will show you the CSS to use. With no information, it is impossible for me to know how to help you.

            From what I gather, this is a HTML/CSS issue, not MODx.

            I need to see the HTML tag id/class
              TinymceWrapper: Complete back/frontend content solution.
              Harden your MODX site by passwording your three main folders: core, manager, connectors and renaming your assets (thank me later!)
              5 ways to sniff / hack your own sites; even with renamed/hidden folders, burst them all up, to see how secure you are not.
              • 50161
              • 5 Posts
              http://webdev2.med.upenn.edu/cms/exercise-westcott/#
              I am asked to hide the News & Events modules from a mobil device.
              What more information can I provide?
                • 42562
                • 1,145 Posts
                donshakespeare Reply #7, 9 years ago
                In your override.css
                find
                .featured {
                  background: #F2F2F2;
                }
                
                Change to:
                .featured {
                  background: #F2F2F2;
                }
                @media screen and (max-width: 300px) { //300 is an example of mobile size
                .featured {
                 display: none;
                }
                }
                
                  TinymceWrapper: Complete back/frontend content solution.
                  Harden your MODX site by passwording your three main folders: core, manager, connectors and renaming your assets (thank me later!)
                  5 ways to sniff / hack your own sites; even with renamed/hidden folders, burst them all up, to see how secure you are not.
                  • 46886
                  • 1,154 Posts
                  And just to walk you through this a bit, what Don has done is taken your 'featured' div and then specified that if the device reports its max-width is 300px or less, the featured div will not display. However if the device reports any bigger size than 300px max, then it will re-appear.


                  Usually the css goes something like this:

                  /*--------
                  Regular styling
                  --------*/

                  .header {}
                  .nav {}
                  .featured {}
                  .footer {}

                  /*RESPONSIVE Styling*/
                  @media screen and (min-width: 1780px) {
                  .featured {width:100%;}
                  }
                  @media (max-width: 1440px) {
                  .featured {width:60%;}
                  }
                  @media (max-width: 480px) {
                  .featured {display:hidden;}
                  }

                  Just as an example, and this organization is just to make it easier to find stuff in the css. Here I have tried to sort of walk down the size of the featured div.

                  One last issue is loading unnecessary data, with a phone you want to provide a lighter page. Here its still loading but just not shown. To avoid loading that...I am sorry I don't know how to do it, but it can be done without a doubt.
                    • 9995
                    • 1,613 Posts
                    fourroses666 Reply #9, 9 years ago
                    display:hidden :O

                    that needs to be display:none smiley
                      Evolution user, I like the back-end speed and simplicity smiley
                      • 46886
                      • 1,154 Posts
                      haha wow that was a mistake, thanks for the correction! smiley