Menu icon Foundation
Newbie question: row layout

I am new to Foundation template. Following code does not work properly. The first sentence shows above the second sentence. And both sentences appear at the left side of the web browser. Where is wrong? Thank you!

Test 2

row

I am new to Foundation template. Following code does not work properly. The first sentence shows above the second sentence. And both sentences appear at the left side of the web browser. Where is wrong? Thank you!

Test 2
Rafi Benkual almost 4 years ago

Hi Mike, just so everyone can see the code, I had to fix your post. Here is the code and text you added:

<!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 | Welcome</title>
    <link rel="stylesheet" href="css/foundation.css" />
    <link rel="stylesheet" href="css/app.css" />
   <script src="js/vendor/modernizr.js"></script>
  </head>
  <body>

  <div class="row">
    <div class="large-4 columns">
        <p>This is the text on the left side. </p>  
    </div>
    <div class="large-8 columns">
        <p>This is the text on the right side.</p>  
    </div>
  </div>

  <script src="js/vendor/jquery.js"></script>
  <script src="js/foundation.min.js"></script>
  <script>
    $(document).foundation();
  </script>
  </body>
</html>

I tried the script on IE, Firefox, and Google Chrome, I checked the browsers, the Javascript feature is enabled. I am using the latest Foundation 5.5.2.

The two sentences locate at the left side of the browsers. I also tried and , the two sentences are still at the left side.

Rafi Benkual almost 4 years ago

Looks right to me. http://codepen.io/rafibomb/pen/yYyXOK

You may be working on a very small screen? In a larger screen the columns are side by side as they should be. You may consider using the medium grid instead of large make the breakpoint smaller.