CODEWITHSUNDEEP
csszurb-foundation
alexandernst
alexandernst

Reputation: 15099

Widescreen row with Foundation (Zurb)

Is there a way to make Foundation (Zurb) display a row as 100% of the window width instead of the fixed size that is currently set?

PS: I know I can edit Foundation itself and make it 100% wide. What I'm asking is if Foundation itself supports that or if it's planned to be supported in the future.

EDIT: This is Foundation 5

Upvotes: 2

Views: 386

Answers (3)

vcoppolecchia
vcoppolecchia

Reputation: 418

Is there a way to make Foundation (Zurb) display a row as 100% of the window width instead of the fixed size that is currently set?

No, it's not supported in that version of Foundation.

Foundation itself supports that or if it's planned to be supported in the future.

In version 5 you'll have to build such a mechanism yourself (read this answer from the Foundation forum to easily achieve it), in version 6 of Foundation you have the chance to do <div class="expanded row"> ... </div> (explained here in the official docs).

Upvotes: 0

fabiovaz
fabiovaz

Reputation: 536

update to foundation 6, and you can use a class 'expanded'

Upvotes: 1

dlane
dlane

Reputation: 1131

You can override foundations base .css file with your own CSS. Therefore, you can keep the base stylesheet intact, while providing custom changes. An example would be to load an additional stylesheet "after" the foundation core stylesheet, or provide an inline stylesheet if the overrides only need to exist on that page.

For example (see bottom part of code block):

<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en" data-useragent="Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Trident/6.0)">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Foundation Template | Workspace</title>
    <meta name="description" content="Documentation and reference library for ZURB Foundation. JavaScript, CSS, components, grid and more." />
    <meta name="author" content="ZURB, inc. ZURB network also includes zurb.com" />
    <meta name="copyright" content="ZURB, inc. Copyright (c) 2013" />
    <link rel="stylesheet" href="../assets/css/templates/foundation.css" />
    <!-- Your Overrides Here -->
    <link rel="stylesheet" href="../assets/css/templates/your-overrides.css" />
    <!-- Your Overrides Here  -->
    <style>
      .row-full-width { width: 100%; max-width: 100%; }
    </style>

Upvotes: 0

Related Questions