I'm trying to create a three column grid, and have the columns evenly distributed across the row.
My markup is simple:
<div class="row">
<div class="col">
</div>
<div class="col">
</div>
<div class="col">
</div>
<div class="col">
</div>
<div class="col">
</div>
<div class="col">
</div>
</div>
My scss is also pretty straight-forward.
.row {
#include outer-container ;
}
.service {
#include span-columns(4) ;
}
However the result is a mess:
That's close to what I want. But the blocks are all over the place.
They aren't evenly distributed either horizontally or vertically.
What could be going on here?
How can I get a simple three-column grid with even distribution of blocks?
You would need to use the omega mixin here. Try this:
.row {
#include outer-container ;
}
.service {
#include span-columns(4);
#include omega(3n);
}
Some more information here:
http://thoughtbot.github.io/neat-docs/latest/#omega
Related
I am building a complex page with multiple sections based on the latest fullpage.js release (developer license). I have 3 full-height sections with auto scroll and then 3 more sub-sections. In the code it basically looks like this:
<div id="fullpage">
<div class="section">content</div>
<div class="section">content</div>
<div class="section">content</div>
...
<div class="section sub-section">content</div>
<div class="section sub-section">content</div>
<div class="section sub-section">content</div>
</div>
I want these sub-sections to have a normal scroll, is this possible?
Not something fullPage.js provides yet.
The most you can do is include all those last sections inside the last section of your site and then use scrollOverflow:true to emulate the normal scroll behaviour as in this example.
See this demo online
<div id="fullpage">
<div class="section">content</div>
<div class="section">content</div>
<div class="section">content</div>
<div class="section">
<div class="sub-section">sub content</div>
<div class="sub-section">sub content</div>
<div class="sub-section">sub content</div>
</div>
</div>
Using something like this:
sub-section{
height: 100vh;
width: 100%;
}
.sub-section{
background: red;
}
.sub-section:nth-child(1){
background: red;
}
.sub-section:nth-child(2){
background: blue;
}
Im having trouble displaying data in a two column div in laravel using bootstrap. The content of the other div is going below the other for some reason. Heres the code.
#extends('layouts.app')
#section('content')
<!--twitch client id!-- vzq62rzb1bbh0d1ebtp5pcx70ysvva!-->
<h1>Hello {{user->user_name}}</h1>
<body background = "img/cool_background.png">
<div class = "container">
<div class = "col-md-3">
<div id = "firstNewsCard" class = "row wow fadeInLeft">
</div>
<div class = "c0l-md-9">
<!--the other column div!-->
</div>
</div>
</body>
#endsection
you made a little mistake, '0' instead of 'o'
<div class = "c0l-md-9"> --> ` <div class = "col-md-9">`
good luck
As bootstrap doc suggests, you should use an element with class="row" to wrap all inner col-x-y classed elements (with "x" being xs, sm, md or lg and "y" usually summing 12, could be less but not more), like:
<div class="container">
<div class="row">
<div class="col-md-3">
</div>
<div class="col-md-9">
</div>
</div>
</div>
How do I properly align my <div class="small-6 columns"> (callout) to the right (on large screen) inside the <div class="row"> in Foundation 6? I am using Sass.
<div class="row">
<div class="small-6 columns">
<div class="callout large">
<p>This is my callout</p>
</div>
</div>
</div>
Just a class large-offset-6 to small-6 columns, it will move six columns to right.
For more information see http://foundation.zurb.com/sites/docs/grid.html
When I set columns of an element within another column, it uses the total number of columns not the number of columns in the parent. e.g.
<div class="therow">
<div class="acolumn">
<div class="achildcolumn">
<!-- my content goes here -->
</div>
</div>
</div>
$total-columns: 12 ;
.therow {
#include grid-row();
.acolumn {
#include grid-column(9);
.achildcolumn {
#include grid-column(7);
}
}
}
So I want .achildcolumn to take up 7/9 columns, but it seems to be 7/12.
This is the expected result. Each sub-grid also uses $total-columns. This prevents you from having to add up columns as you nest them.
<div class="row">
<div class="small-12 columns">
<div class="row">
<div class="small-6 columns">
50% width
</div>
<div class="small-6 columns">
50% width
</div>
</div>
</div>
</div>
If you want to get more granular with your nested columns one option would be to change $total-columns to 24, or even 36. Then you would have ultra-fine control over sub-columns.
I am trying to get all children which has specific class and parent of this parent does not have a specific class.
I am trying a code like this, but it's not working.
$hrefs = $xpath->evaluate("//div[not contains(#class, 'tested-app-section')]/div[#class='product-container-body']/div");
Structure of the HTML I am working with and need to edit a little bit looks like this, other HTML content in <body> is irrelevant. (<body> contains more then just this block of HTML):
<body>
<div class="product-detail-section tested-app-section">
<div class="product-container-head"> ... </div>
<div class="product-container-body"> ... </div>
<div class="product-container-body"> ... </div>
</div>
<div class="product-detail-section publish-app-section">
<div class="product-container-head"> ... </div>
<div class="product-container-body"> ... </div>
<div class="product-container-body"> ... </div>
</div>
<div class="product-detail-section product-specific-section">
<div class="product-container-head"> ... </div>
<div class="product-container-body"> ... </div>
<div class="product-container-body"> ... </div>
</div>
I am trying to avoid in the result the very first <div> box (box with class "tested-app-section"), then I am trying to avoid everything witch class "product-container-head".
But I just cannot find a way how to do it.
Edit: So basically I am trying to get
/html/body/div[contains(#class, 'product-detail-section') AND not contains(#class, 'tested-app-section')]/div[not(#class='product-container-head')]
but this code doesn't return anything...
You are close, but missed a few things. Try this xpath expression and see if it works:
//div[not(contains(#class, 'tested-app-section'))]/div[not(#class='product-container-head')]