Comments (11)
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.
from foundationpress.
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
from foundationpress.
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;
}
from foundationpress.
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
from foundationpress.
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>
from foundationpress.
@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
from foundationpress.
I've removed the .row from header
have you replaced it with .full-width ?
from foundationpress.
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.
from foundationpress.
@dberz @kartonnade : I added a few commits (ca24b3e , 09e1a84) and updated the demo site with a full-width hero element: http://foundationpress.olefredrik.com
from foundationpress.
@olefredrik thanks for letting me know ! Regards
from foundationpress.
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.
from foundationpress.
Related Issues (20)
- How to disable desktop menu, top bar completely - use mobile menu at all widths HOT 1
- Accessibility Issue - How to edit the HTML of foundationpress_pagination output HOT 1
- JS code being revised HOT 1
- White Text in TinyMCE visual editor HOT 3
- Mobile Navigation Not Working in Mobile HOT 1
- npm run build doesn't build the files correctly
- editor.scss error with .wp-block class
- How to rename build js file with .min for js when i run build?
- Add breadcrumbs using WordCrumbs HOT 1
- The Future? HOT 4
- Doesn't work in China HOT 1
- Automatic Resizing of images HOT 1
- Missing closing LI's in pagination markup HOT 1
- can you please provide help for me. HOT 4
- Error on npm install HOT 1
- Installed Stripe and now I can't get npm start going
- Update CS setup
- languages/ru_RU execution permissions
- npm run build not updating app.css neither editor.css HOT 1
- Unsightly white area outside viewport HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from foundationpress.