100% width divs?

[dberz]

Hello -

Thanks for the framework - I'm a big fan.

Question: is it possible to take certain rows and display them at full, 100% browser width?

I try using the "homepage-hero" class that is used on the foundation homepage (http://foundation.zurb.com/index.html) but I cannot get this to span 100%.

I've also looked at standard Foundation 5 documentation and they recommended setting classes as below, but I can't seem to "get wide" when adding these to my _colors.scss file. I wonder if something about the off-canvas wrapper might be constraining my proportions.

Thanks.

Examples of recommended code in non-FoundationPress Foundation 5:

.row {
width: 100%;
margin-left: auto;
margin-right: auto;
margin-top: 0;
margin-bottom: 0;
max-width: 62.5em;
}

.full-width {
width: 100%;
margin-left: auto;
margin-right: auto;
max-width: initial;
}

[charleslouis]

hi @dberz,

As far as I know regular rows are meant to be 100% of their container ( .container ) without being larger than 62em (or 71.25rem depending on your version). Also I'm not sure you can cumulate .row and .full-with to get the desired effect as

.full-width {
max-width: initial;
}

may not overload

row {
max-width: 62.5em;
}

I've been testing the following and you may wan't to try something like :

|.row (max-with 62em) |
|.full-width (max-width: initial) |
|.row (max-with 62em) |

Another solution could be to tweek the markup and take your full-with div out of the flow.
This could be needed if its parent has a defined, constrained, width.

[dberz]

Thanks Kartonnade!

Apologies, I'm a newbie, what syntax is your "|.row (max-width 62em) |...." example? Are you suggesting CSS inline in the HTML markup.

I'm stumped because it seem that Zurb themselves have achieved this desired effect on their homepage 3x: http://foundation.zurb.com/index.html Hero, newsletter footer and regular footer.

I love having standard text columns constrained to a useable 62em, but I'd love to replicate the edge-to-edge splash elements demonstrated on the Foundation homepage and popular across the web.

David

[charleslouis]

My fault, it wasn't well written. I hope this is clearer :

<div class="full-width"></div>
<div class="row"></div>

If you don't like presentational classes, at some point you'll want to extend some more "semantic" classes :

<div class="my-hero"></div>
<div class="my-standard-text"></div>

and then extend your scss like so :

.my-hero{
@extend .full-width;
}
.my-standard-text{
@extend .row;
}

[dberz]

I'm still stumped.

Here's what I know, I copied the exact CSS used on the foundation.zurb.com homepage into a sandbox project and had no trouble inserting a 100% wide div within the 62.5em content flow.

However, this codes does not seem to work within the FoundationPress theme. The issue seems to be theme specific!

Code that works outside of FoundationPress:

#homepage-hero {
background: url(../img/marquee-stars.svg) #074e68;
height: 650px;
text-align: left;
position: relative;
padding: 100px 20px 0 20px;
}

---

It was mentioned that "Another solution could be to tweek the markup and take your full-with div out of the flow. This could be needed if its parent has a defined, constrained, width." This seems much harder than adding the class above, but I would love to understand how this works, thanks!!

David

[charleslouis]

I haven't tried FoundationPress yet to be true so I won't be of help here.
However #homepage-hero doesn't specify any width, so we can't really expect it to be 100% of its parent.

Also, avoid at all cost styling with #ids.

What I meant by taking the .full-width out of the flow was something like :

<class="container">
<div class="full-width"></div>
<div class="row"></div>
</div>

you'd have something more like :

<div class="full-width"></div>

<class="container">
<div class="row"></div>
</div>

[dberz]

@kartonnade, thank you for looking into this. Regarding IDs, I don't disagree, I was just copying directly from zurb.com

I see that header.php concludes with

And that the second instance of .row in app.css has a max-width set to 62.5ems.

Therefore, anything in my individual post-type .php pages will be locked to this max width. Grrr!

I've removed the .row from header to allow the .row to be located within the actual post page. Hopefully this doesn't break everything downstream :)

@olefredrik, would be curious to get your thoughts here. Am I missing an obvious Foundation customization option here?

David

[charleslouis]

I've removed the .row from header

have you replaced it with .full-width ?

[olefredrik]

Hello,

I'm not sure I understand what you are looking for?

Anyway, here are the basics:

• Anything you put in a class with the name "row" will have a 100% width with a defined maximum width of 62.5 rem.
• All div's will take 100% of page-width by default, if nothing else is specified in the CSS.
• It is possible to set a repeating background in a container with 100% width and calling it the "hero". Sets a new class of "row" inside the "hero", it will take up 100% width with a maximum width of 62.5 rem, such as the Foundation website.

See this example where you add the following css to get the desired effect.

.container {
    background: url("http://foundation.zurb.com/assets/img/marquee-stars.svg") repeat scroll 0 0 #074E68;
    height: 650px;
    padding: 100px 20px 0;
    position: relative;
    text-align: left;
}

I do not have much time to spare right now, as I have several projects in the pipeline. But as soon as I get the chance I'll update the demo the site with more examples and more templates.

[olefredrik]

@dberz @kartonnade : I added a few commits (ca24b3e , 09e1a84) and updated the demo site with a full-width hero element: http://foundationpress.olefredrik.com

[charleslouis]

@olefredrik thanks for letting me know ! Regards

[dberz]

Brilliant. I deduced this myself as well. Removing the .row class from the header and adding it into the post pages gave me the flexibility I needed.

I appreciate you updating the core templates.