Suppose I have the following very simple HTML page layout:
<div class="wrapper">
<div class="content"></div>
<div class="sidebar"></div>
</div>
And the sass
.content {
#include make-sm-column(7);
#include make-sm-column-push(5);
}
.sidebar {
#include make-sm-column(5);
#include make-sm-column-pull(7);
}
The sidebar has to come after the content.
Is there a way to have the content "pushed" to the right only if a sidebar is present?
Related
I am trying to make a common html structure for my website using bootstrap 4, the common elements are: sidebar, h1 and content.
The main task is arranging them properly based on the screen size:
In mobile view they should go in the following order: h1, sidebar and content, like this:
In desktop view they should go like this:
Here is my codepin: https://codepen.io/anon/pen/ejLroV
As said earlier in above comments, you can achieve that using - bootstrap order-classes https://getbootstrap.com/docs/4.1/layout/grid/#order-classes, pleae have a look at the below working snippet, hope it helps :)
aside {
background: grey;
height: 300px;
}
h1 {
background: green;
}
section {
background: #c1c1c1;
height: 300px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row d-lg-block">
<h1 class="col-12 order-1 col-lg-9 float-lg-right order-lg-2">H1 Title</h1>
<aside class="col-12 order-2 col-lg-3 float-lg-left order-lg-1">Sidebar</aside>
<section class="col-12 order-3 col-lg-9 float-lg-right order-lg-3">Content</section>
</div>
</div>
I have a bunch of divs like this
<div id="parentDiv">
<div class="childDiv">some content</div>
<div class="childDiv">some content</div>
<div class="childDiv">some content</div>
</div>
is there some way using only CSS that I could show the current index to the left of the childDiv elements and it automatically update if I were to shuffle them around using jQuery or would I have to to manipulate the child div using jquery ?
Or
One of the other ways I was thinking to handle it would be to change them to ol li but then I need them to be zero based and I haven't see any thing in css to do that either
You can use CSS counters:
#parentDiv {
counter-reset: index; /* Create a `index` counter scope */
}
.childDiv:before {
content: counter(index) ". "; /* Display `index` counter */
counter-increment: index; /* Add 1 to `index` */
}
<div id="parentDiv">
<div class="childDiv">some content</div>
<div class="childDiv">some content</div>
<div class="childDiv">some content</div>
</div>
On this website avoirundevis.fr i need to center content like this on this picture : http://www.evernote.com/l/AMM-nvY7omBHtLzs4VFLBhTzw6wkkTS5rjw/
I have trying with this code http://jsfiddle.net/94150148/utxnmr1h/ but i don't know how do this, thanks for help
<div class="row-fluid">
<div class="span6">Fenêtres (PVC, bois, alu)</div>
<div class="span6">Façade (ravalement, enduit,...)</div>
</div>
<div class="row-fluid">
<div class="span6">Construction - Extension</div>
<div class="span6">Sols intérieurs</div>
</div>
Styles baby:
I updated the html/css on your jfiddle: http://jsfiddle.net/utxnmr1h/7/
css:
.container {
text-aling:center;
width:100%;
}
.row-fluid {
width:80%;
margin:auto;
}
html: I added a div outside the ones you provided and named it container.
I have a problem.. i cant get my elements take up three cols, i have set it to span 4 of 12 that should equal to 3 column. i has able to do it with #include omega; on last-child but that is not really a solution when i have more than 3 elements. i know its because it add margins-right to the third element, but how would i get around that? so that it removes the margin-right on every third element?
Scss
$susy: (
columns : 12,
gutters : 1/2,
container : 90%,
box-sizing : border-box,
);
$small : 30em;
$medium : 47em;
$large : 75em;
// layout
.layout {
#include container();
.cases {
background-color: green;
.case {
#include span(4);
background-color: blue;
}
}
}
HTML
<article class="case">
<a href="case.php">
<div class="case-item case-img" style="background-image: url(img/img-1.jpg)">
<div class="case-info">
<header><h3>Case#1</h3></header>
</div>
</div>
</a>
</article>
<article class="case">
<a href="case.php">
<div class="case-item case-img" style="background-image: url(img/img-1.jpg)">
<div class="case-info">
<header><h3>Case#1</h3></header>
</div>
</div>
</a>
</article>
<article class="case">
<a href="case.php">
<div class="case-item case-img" style="background-image: url(img/img-1.jpg)">
<div class="case-info">
<header><h3>Case#1</h3></header>
</div>
</div>
</a>
</article>
First of all you need to import Susy in to your sass file.
Further more you need to get rid of the margin-right for the last child.
Use this code and it should work:
#import "susy";
$susy: (
columns : 12,
gutters : 1/2,
container : 90%,
);
// layout
.layout {
#include container();
}
.case {
background-color: blue;
#include span(4);
&:nth-child(3n) {
#include last;
}
}
have you tried the gallery() mixin (see the docs)? It's built to handle this use-case exactly.
.case {
#include gallery(4);
}
I'm having a very basic problem getting columns to work in Foundation 4 with Sass/Compass.
At screen sizes larger than the $small media-query breakpoint (768px), I want the two columns to be of equal width (6 columns each) and beside each other. Right now, at screen sizes larger than $small, each column only occupies the left half of the page, with the second column bumping down below the first.
I've tried using Foundation's classes rather than the Sass mixins, but I'm getting the same result. I've also tried resetting to the Foundation default settings and imports, but nothing changes.
I have the following HTML:
<section>
<div class="header">
<h1>Sample text here.</h1>
</div>
<div class="content">
<p>Sample text here.</p>
</div>
</section>
I'm using the following SCSS:
section {
#include grid-row;
}
.header {
#include grid-column( 12 );
#media #{$small} {
#include grid-column( 6 );
}
}
.content {
#include grid-column( 12 );
#media #{$small} {
#include grid-column( 6 );
}
}
And here's a link to the reduced test case: http://bit.ly/149zpEq
The red column and green column should be side-by-side at screen sizes wider than 768px. Alas, they aren't.
Use this markup without any additional sass code:
<section class="row">
<div class="large-6 medium-6 small-12 columns">
<div class="header">
<h1>Sample text here.</h1>
</div>
</div>
<div class="large-6 medium-6 small-12 columns">
<div class="content">
<p>Sample text here.</p>
</div>
</div>
</section>
You just need add 'large-6' and 'medium-6' for screen larger than $small and add 'small-12' for small screen.
Change your Sass to this.
.header {
display: table-cell;
#include grid-column( 12 );
#media #{$small} {
#include grid-column( 6 );
}
}
.content {
display: table-cell;
#include grid-column( 12 );
#media #{$small} {
#include grid-column( 6 );
}
}
display: table on it's own is not enough, child elements must have display: table-cell.
Another option would be
section > div{
display: table-cell;
}