Menu icon Foundation
XXlarge

I want my site to expand to xxlarge so which class should I use? xxlarge doesn't work even with $include-xl-html-grid-classes: true; (settings.scss) uncommented.

I am simply using the (reduced) out-of-the-box index.html page as an example, but for the life of me cannot get it to expand on a 24" screen!

Little help?

<!doctype html>
<html class="no-js" lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Foundation</title>
    <link rel="stylesheet" href="css/app.css" />
    <script src="bower_components/modernizr/modernizr.js"></script>
  </head>
  <body>
        
    <div class="row">
      <div class="xxlarge-12 columns">
        <div class="panel">
          <h3>We&rsquo;re stoked you want to try Foundation! </h3>
          <p>To get going, this file (index.html) includes some basic styles you can modify, play around with, or totally destroy to get going.</p>
          <p>Once you've exhausted the fun in this document, you should check out:</p>
                 </div>
      </div>
    </div>

     <script src="bower_components/jquery/dist/jquery.min.js"></script>
    <script src="bower_components/foundation/js/foundation.min.js"></script>
    <script src="js/app.js"></script>
  </body>
</html>

xxlarge

I want my site to expand to xxlarge so which class should I use? xxlarge doesn't work even with $include-xl-html-grid-classes: true; (settings.scss) uncommented.

I am simply using the (reduced) out-of-the-box index.html page as an example, but for the life of me cannot get it to expand on a 24" screen!

Little help?

<!doctype html>
<html class="no-js" lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Foundation</title>
    <link rel="stylesheet" href="css/app.css" />
    <script src="bower_components/modernizr/modernizr.js"></script>
  </head>
  <body>
        
    <div class="row">
      <div class="xxlarge-12 columns">
        <div class="panel">
          <h3>We&rsquo;re stoked you want to try Foundation! </h3>
          <p>To get going, this file (index.html) includes some basic styles you can modify, play around with, or totally destroy to get going.</p>
          <p>Once you've exhausted the fun in this document, you should check out:</p>
                 </div>
      </div>
    </div>

     <script src="bower_components/jquery/dist/jquery.min.js"></script>
    <script src="bower_components/foundation/js/foundation.min.js"></script>
    <script src="js/app.js"></script>
  </body>
</html>
sankhabanerjee over 4 years ago

Just remove the "row" class from the parent div.

Thanks