I have a 24 Susy column grid. I'm trying to do some boxes that will each span 6 columns (so 4 per row), but I'm wanting to add some gutters around them, withing a wider container that is 24 columns wide. Unfortunately, no matter what I try, I can't get it to work. It seems the columns are not adjusting their width to accommodate the gutters...I thought Susy was supposed to do that, no? I'm new to all of this so I've read lots of articles and posts and can't figure out this answer, so any help you can give is greatly appreciated.
Here's the code:
.solutionThumbnails {
#include span(24 no-gutters);
#include container;
#include clearfix;
li {
#include span(6);
#include gutters(8px after);
background: #666;
float: left;
height: 240px;
display: block;
&:nth-child(4) {
margin-right: 0px;
}
}
}
And here's what it's looking like right now, ignore the formatting otherwise, still coding :) (you'll see its knocking the fourth item down):
http://i.stack.imgur.com/5tmWp.jpg
Because Sass isn't aware of the DOM, Susy doesn't know that your span and gutter mixins are being applied to the same element, or are related in any way. Susy will handle the math when it has all the information. I think you want something like this?
.solutionThumbnails {
#include container(24);
li {
#include gallery(6 of 24 split);
background: #666;
height: 240px;
}
}
I don't know your settings, or many specifics about the output you need, but that should get you close. You don't need to set a span, container, and clearfix on the same element — the container mixin handles all of that. Similarly, gallery handles everything you need for a consistent layout of same-sized items.
My example doesn't get you exactly 8px gutters. The only way to mix static (px) gutters with fluid (%) grids, is to move the gutters inside the elements. You can approximate 8px gutters with a fluid value by changing the gutter ratio as needed. The default ratio is .25.
Related
On my site I am using the theme Newspaper. I have modified it a bit with css. I am trying to get my sidebar (instagram, most popular, newsletter sign up) to have a width of 26% so it would be on the same row as the editor's picks.
The problem is that I can not get the sidebar to have a width of 26% without affecting the 3 blocks above editor's picks. Since both of them are .td-pb-span4. I have tried to solve this issue by using a more specific code just for the sidebar (code down below) and it still will not work. It is weird because the code I am trying to use will apply in chrome developer, however once I add it to my css it doesn't apply to my site. I would really appreciate any solution, I have been trying to figure this out for a few days and can't seem to find the problem.
code I first tried to add but it affected both the sidebar and the 3 blocks above editors picks (and I only want width:26% to apply to the sidebar)
.td-pb-span4 {
width: 26%;
}
more specific code I am trying to add that only applies to the sidebar (it will work in chrome developer, but will not work if I apply it to my site css)
.vc_column.td_uid_70_5976097f07941_rand.wpb_column.vc_column_container.td-pb-span4 {
width: 26%;
}
Don't do this:
/* index ~line 2817 */
.td-pb-span8 { /* WHY */
width: 70%;
float: left;
margin-right: 4%;
}
you're touching a well defined grid system that has to work out of the box:
.td-pb-span8 {
width: 66.66666667%; /* yep. There's no reason on earth you should set to 70% */
}
Grids are 12 based so do the math: 100 / 12 * 8
Help me out you sassy susy's, I am at my breaking point! I am trying to make the most efficient layout for my project, and I have come across something I havn't been able to figure out with Susy/breakpoint.
I want the layout columns to change at the breakpoints and not have to change all the individual spans of the div's (as there will be many different span widths with this way. Instead of just 1 and changing 3 or 4 different column layouts).
Right now the only way I was able to get this to work was by changing the spans of the divs and keeping the columns unchanged, but I would like the divs to always stay the same size and then just drop into place depending on how many columns are left to fill.
I think it is just the way I am writing the #include. I have tried doing container/layout inside the breakpoint instead of with-layout with no success.
I know this is probably going to be a simple fix that I am just not seeing.
Edit: Also something I have noticed is that no matter how I change things the div is always taking the default $susy map and is not changing it at breakpoint.
SCSS:
#import 'susy';
#import 'breakpoint';
$layout1: layout(12 .125 split fluid center);
$layout2: layout(16 .125 split fluid center);
$layout3: layout(24 .125 split fluid center);
.container {
#include container;
#include with-layout($layout1);
background: orange;
#include breakpoint(600px) {
#include with-layout($layout2);
background: red;
}
#include breakpoint(1000px) {
#include with-layout($layout3);
background: blue;
}
}
.testbox {
#include span(1);
}
html:
<div class="container">
<div class="testbox">hello</div>
<div class="testbox">hello</div>
<div class="testbox">hello</div>
<div class="testbox">hello</div>
<div class="testbox">hello</div>
<div class="testbox">hello</div>
<div class="testbox">hello</div>
<div class="testbox">hello</div>
</div>
with-layout only changes the settings used for Susy mixins/functions nested inside it:
#include with-layout($layout2) {
// code nested here will use the $layout2 settings
}
You have nothing nested inside any call to with-layout - therefor no changes. This is exactly what #cimmanon was trying to explain in the comments. Similarly, #media only changes things nested directly inside it — so your colors change fine, but your spans don't. The colors are actually nested, the spans aren't.
Because Sass is pre-processed, span(1) cannot have multiple outputs unless it is called multiple times. Right now you call it once, so it has one output. If you call it multiple times inside different layout contexts, you can get different outputs.
// This will give you different spans at different breakpoints:
#include breakpoint(600px) {
#include with-layout($layout2) {
#include span(1);
background: red;
}
}
// you can also use the susy-breakpoint shortcut:
#include susy-breakpoint(1000px, $layout3) {
#include span(1);
background: blue;
}
I've got a container which sometimes has three elements, sometimes four. The height of the container is constant.
Are there any bright ideas out there for a CSS-based method for a vertical liquid layout like this?
That is, so the children are either 25% or 33% height, but they figure that out by themselves? (smart kids.) EDIT of course it doesn't necessarily have to be percentage based...
I can do something PHP-based pretty easily, but a more elegant solution would be nice.
Here is a little Sass to make your life easier:
$height: 200px
ul
height: $height
#for $i from 1 through 6
.list-#{$i} li
height: $height/$i
You can also do it with straight CSS:
.list-1 li {
height: 200px;
}
.list-2 li {
height: 100px;
}
...
With PHP, add the .list-# class to the parent element based on how many children there are.
You could also accomplish this in pure CSS with flexbox, but it will not work in the browsers you require.
Well, I've just ended up using a table as the outer container. Table rows added dynamically vertically scale the layout automatically.
Elegant enough, and prevents any PHP processing. Any other solutions welcome, of course (and maybe accepted).
Here's a fantastic CSS menu:
The only disadvantage its not stretched to 100%... if it has 2 elements, it should be 50%/50%, if 4 items then 25%/25%/25%/25% just like they were table cells. How to do that? I'm new to CSS.
Use display: table/table-cell (for modern browsers and IE8+) and display-table.htc (for IE6/7).
Modify its width as 100% will make the menu span to full width.
#myfantasticmenu { width: 100%; }
I simulated the change with firebug and the needed Style defination was
#nav {
overflow: hidden; /* To clear the div */
width: 100%;
}
And about the part, where you need 50/50 for two and 25 each when the item are 4, you will require some javascript to do so.
If you consider using jQuery then it will something like
childs= $("#myfantasticmenu").children('a'); //grab the list items
childs.css('width', (100/childs.length)+%);
If avoiding scripting is your MAJOR target, then bring tables into the games, they automatically do the behavior you need.
If you can read the Headings ... one's called JWT, the other Alela Diane.. how do I get "Alela Diane" to fill up the space between them ( no puns intended )
The CSS property for these div's is set to display: inline-block.
The HTML - >
<div id="shastra_display">
<div class="shastra_post">
There are multiple div's like this containing the Alela Diane's and JWT's etc.
</div>
</div>
The CSS - >
#shastra_display
{
width: 880px;
}
#shastra_display div
{
display: inline-block;
vertical-align: text-top;
}
.shastra_post
{
width: 270px;
background-color: light-grey;
}
Is it always going to be just two
columns? – thirtydot
It's two columns because the width of
the parent box allows only two to fit.
– Zach
So, the number of columns changes depending on the browser width.
That means you can't "cheat" and do it like this (as suggested by #Stefy):
http://jsbin.com/atimu4
Other than a fixed number of columns, CSS can't do it. See this answer for a comparision of the ideas:
CSS Floating Divs At Variable Heights
You will have to use JavaScript. There's already a convienient jQuery plugin: jQuery Masonry
Some interesting demos:
http://masonry.desandro.com/demos/animating-jquery.html
http://masonry.desandro.com/demos/adding-items.html
You should probably use a 2-column template in order to display the items properly.