CODEWITHSUNDEEP
wordpresssasszurb-foundation
Imrul.H
Imrul.H

Reputation: 5870

global-width is not working with foundation's new XY Grid

I am using latest jointsWP which uses Foundation 6.5. I was using flex grid before without any issue. Thought I could give the new xy grid a try as it has some handy features. But the global width is not working. In _settings.scss I have these: 

$global-width: 1150px;
$xy-grid: true;

And in style.scss:

// Select the grid you would like to use
// @include foundation-grid;
// @include foundation-flex-grid;
@include foundation-xy-grid-classes;

// @include foundation-flex-classes;
@include foundation-visibility-classes;
@include foundation-float-classes;

In footer.php:

<div class="inner-footer grid-x grid-margin-x grid-padding-x">

    <div class="small-12 medium-12 large-12 cell">
        <nav role="navigation">
            <?php joints_footer_links(); ?>
        </nav>
    </div>

    <div class="small-12 medium-12 large-12 cell">
        <p class="source-org copyright">&copy; <?php echo date('Y'); ?> <?php bloginfo('name'); ?>.</p>
    </div>

</div>

But it's becoming full width in the browser. I am not sure what I am missing here. Kinda also confused between foundation-grid and foundation-xy-grid-classes. But I tried both. Also is it better to use the new xy grid than the flex grid, opinions? Thanks in advance.

Upvotes: 0

Views: 209

Answers (1)

user753676
user753676

Reputation:

You have to add the container which is also mentioned in the docs. The grid itself uses the available width.

https://foundation.discourse.group/t/global-width-is-not-working-with-foundations-new-xy-grid/2381

You need the .grid-container, see https://get.foundation/sites/docs/xy-grid.html#grid-container

See https://github.com/foundation/foundation-sites/blob/b58d2354f54bb601f1b4ae7ee8536ac7ccfb18ba/scss/settings/_settings.scss#L859 $grid-container: $global-width;

Upvotes: 1

Related Questions