On March 26, 2019 we launched new MODX Forums. Please join us at the new MODX Community Forums.
Subscribe: RSS
  • Just keep in mind that even if certain content isn't displayed, the browser still has to download it and have the whole thing available. If you're dealing with large blocks, big images, etc, then having only the content needed for the smallest device and some AJAX to load the content only for larger devices might be a better way to go.
      Studying MODX in the desert - http://sottwell.com
      Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
      Join the Slack Community - http://modx.org
    • if your using bootstrap then just include class hidden-xs in your div
      • You are using the Skeleton framework.

        If you take a look at "assets/design/css/skeleton.css" you will find the following:
        /*  #Mobile (Portrait)
        ================================================== */
        
            /* Note: Design for a width of 320px */
        
            @media only screen and (max-width: 767px) {
                .container { width: 300px; }

        AND
        /* #Mobile (Landscape)
        ================================================== */
        
            /* Note: Design for a width of 480px */
        
            @media only screen and (min-width: 480px) and (max-width: 767px) {
                .container { width: 420px; }


        If you want to keep your CSS in line with Skeleton you can preset it to the following:
        @media only screen and (max-width: 767px) {
        	.container .featured {display:none;}
        	}

        This says: any device viewport with a size below 767px should not display the featured section, everything above this size should show the section.

        The problem here (which could possibly arise) is: you are hiding a section that is nested. You could end up with an empty coloured block (in your design, grey), which is possibly not what you want.

        You could create a universal class that can be added to any element that you don't want to be shown in mobile devices.

        Example CSS:
        @media only screen and (max-width: 767px) {
                .hidemobile {display:none;}
        	}

        Example HTML:
        <section class="container hidemobile">
          <article class="sixteen columns zeroed">
            <section class="featured">
              <div class="eight columns alpha">
                <div class="padding">
                  POST CONTENT
                </div>
              </div>
              <div class="eight columns omega">
                <div class="padding">
                  POST CONTENT
                </div>
              </div>
              <div class="clear"></div>
            </section>
          </article>
        </section>

        Note:
        <section class="container">

        Changes To:
        <section class="container hidemobile">
        [ed. note: iusemodx last edited this post 5 years ago.]
        • The mobile expert lays it out like boss :-$
          • Thank you guys! I really appreciate it!!!