CODEWITHSUNDEEP
htmlcsszurb-foundation
Learning
Learning

Reputation: 20001

Zurb Foundation maximum row with 768pixels

I am new to zurb foundation and i have to design web page for small screen 768pixels and i am doing it with zurb foundation. below is my basic HTML schema

 <!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>Mailing Subscription Form</title>
    <link rel="stylesheet" href="css/foundation.css" />
    <script type="text/javascript" src="js/vendor/modernizr.js"></script>   
 </head>
 <body>
     <form id="form1" runat="server">
       <div class="row">
          <div class="large-12 columns" style="background-color:Red;">
             <h1>Welcome to Foundation</h1>
           </div>
        </div>
     </form> 
 </body> 
 </html>

Width default option my row width is 1000px, how can i limit my row width to 768pixels maximum in zurb foundation.

Update:

If you want it to be responsive the use following css:

.row
{
   max-width:768px;
}

Upvotes: 0

Views: 89

Answers (2)

user3834165
user3834165

Reputation: 23

Within the _setting.scss file that comes with a foundation project, there is a variable in there that can explicitly be changed to define the row width without having to overwrite it with your own css. The variable looks like this:

// $row-width: rem-calc(1000);

It is found under the 'grid' section within the file and also gives you access to a bunch of other settings that are stock with foundation. Hope this helps!

Upvotes: 2

Liad Livnat
Liad Livnat

Reputation: 7475

if you have a control over the css just add (change foundation.css)

.row
{
   width: 768px;
}

Upvotes: 2

Related Questions