I am learning about breakpoints, singularity and float-spans but I can not get them to play nicely together.
For simplicity I am sticking with a 12 column grid and I have avoided any nesting. I want a display of six column float span at the $tablet breakpoint and a three column span at the $desktop breakpoint. In the gist below I refer to these alternative displays as a breakpoint groups.
http://sassmeister.com/gist/1cca897661125564db41
Each breakpoint group works independently of other, but when combined in the same scss something goes wrong. Not sure what I am doing wrong. Wrong scss or some conflict between the n-th values?
EDIT
Here is the right way to do it. Thanks Jan
http://sassmeister.com/gist/04adc7d2c992f3d48736
As it is using min-width some styles are inherited from the lower breakpoints to the larger ones, you need to override the class settings in the higher breakpoints, in your example is clear:right on every second element and then some width setting is overridden as well since .tile:nth-child(2n+2) is stronger that .tile in higher breakpoint... you can fix it by doing something similar to this:
#include breakpoint($desktop, true) {
.tile {
border: 1px solid;
margin-bottom: 20px;
&:nth-child(n){
#include float-span(3);
clear:none;
}
&:nth-child(4n+4) {
#include float-span(3,last);
}
}
}
&:nth-child(n) basically reset the settings for sizes and &:nth-child(4n+4) fixes the last
Related
I wanted to know if there were a best practice for styling any element that in turn could be placed anywhere in a page and retain its margin.
For example:
An <h1> tag with a ruleset of margin-bottom: 2rem; and a <p> tag with a ruleset of margin-top: 2rem.
Now these elements can be used anywhere within a webpage. But we the <h1> is placed before the <p> tag we will be encountered with a spacing of 4rem, now the behavior that I'd like to have is to maintain the space of one or the other. As a reminder this is a small example, a web page may contain all sorts of html elements as well as buttons and other components. To create a ruleset for each instance and combination is super time consuming and cumbersome, is there a better way?
if you know margin collepsing so its help you understand that margin remaining between <h1> and p is only 2rem not 4rem and here a stackoverflow answerlink for your question... hope you got help form this
Most elements (such as <h1> and <p>) have in-built default vertical margins. These are the 'generally accepted' guidelines, and you shouldn't explicitly need to overwrite them. You can, however, and if you want to set your own 'generic' margins that can be used anywhere, the best approach would be to use classes. For example:
.margin-top {
margin-top: 15px;
}
Any element with this class (such as <h1 class="margin-top">) will have this rule overwrite their default. Naturally, you could apply the rule to h1 directly,
Yes, you will encounter situations where you have both a top and bottom margin sitting next to one another, but you will need to work out when this sort of behaviour is acceptable, and when it is not. One way to avoid this is to make use of adjacent sibling combinators:
h1 + p {
margin-bottom: 0;
}
Because the above rule has more specificity than the generic h1 selector, it will take priority.
Yes, it will be a pain to work out all of the possible combinations that you may encounter, and you will have to write rules for each scenario. But you can make use of the class-driven approach above in combination with adjacent sibling combinators to significantly help eliminate this problem:
.margin-top {
margin-top: 15px;
}
.margin-bottom + .margin-top {
margin-top: 0;
}
This will completely prevent any element with the class margin-top from applying its margin only if it follows a class with margin-bottom set.
Note that many other approaches exist to already, and one such approach makes use of a Lego analogy to suggest simply making use of a padding on each element that is equal to half of the gutter:
$gutter: 20px;
.element {
padding: $gutter / 2;
}
Which is illustrated in a complete proof-of-concept code example here.
I am trying to find a way to static the size of the portfolios as they become uneven due to multiple categories. I am using the Avada theme and if you go to the portfolios page (https://www.socalip.com/professionals/) you will see how some of the lower portfolios float lower than others.
Does anyone know of any CSS that might make those a static size? I'd like to keep them all uniform if possible. Apologies if i missed any important details.
Thanks in advance!
Your position absolute is throwing everything out of wack. This will help you go around it
.fusion-portfolio-post.fusion-col-spacing {
position: static !important;
}
I'm using both classes in the specificity in case the col-spacing class is also being used somewhere else, but to make it even better, add a hook class on your highest parent div that holds this component and add that to the specificity to make it even more specific and not mess up another component in your site.
For example
<div class="hook-class">
<my shortcode for this component here/>
</div>
//CSS
.hook-class > .fusion-portfolio-post.fusion-col-spacing {
position: static !important;
}
EDIT (Aditional code you may need...Optional)
The H4 tag will give you problems with longer names wrapping. I would ellipse those if I were you and keep font size for legibility purposes. But it's your choice nonetheless Notice Jeff in my screenshot
.fusion-portfolio-content h4 {
width: 200px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
Use specificity here as well.
Here is the test at different responsive breakpoints
1024px
991px
768px
<500px
I noticed on my phone, using this menu:
It's obvious that it exceeded the size of the row from this picture and it creates a line break during the transition, however, on desktop, it does not.
It should stay in the same row during the transition:
Here is my sass:
.h5-menu { //h5 menu styling
#include span(4 inside);
#include transition(0.25s ease all);
font-weight:400; //override default 300
text-transform:uppercase;
color:$lb300;
padding:{
bottom:25px;
top:25px;
}
background-color:$lb700;
cursor:pointer;
}
.h5-selected { //css class to add when option is selected
#include span(8 inside);
background-color:$lb500!important;
color:$white!important;
}
On the parent element, I set the layout to have no gutters.
I noticed that when I remove the transition, there's no line break; however, it looks choppy, is there anyway I can make this work with a transition?
CodePen
Try adding of 12 after you mention how many columns you want like...
#include span(4 of 12 inside);
If it still doesn't solve... Kindly consider preparing a codepen/jsfiddler or share the link 2 your live site ;-)
EDIT
If that doesn't solve...
Check if version of Susy is atleast v2+
Inspect the elements to see if any horizontal margin is applied, I've had thousands of issues where margin turned out to b the culprit.
box-sizing for both elements should be border-box.
Fix for subpixel issues
It seems like it's a sub pixel issue... try this css...
.h5-selected {
...
margin-right: -1px;
}
Using Susy via CodeKit, I run into a strange situation:
If I use:
.example { #include span (first); }
or
.example { #include span (last); }
Susy works as expected according to the documents. However, when using e.g.
.example { #include span (4 at 5 of 12); }
a 4 column box is made, but it is not placed in column 5, but simply floating left.
However, when using e.g.
.example { #include span (3 at 8 of 12); }
the box is 3 columns, as expected, but starts floating right instead of in column 8. In other words, placing an element in a certain column doesn't work. Replacing the susy mixin with a simple margin-left works fine, but that isn't the purpose of using a grid system like Susy.
I have contacted the developer of CodeKit, but he doesn't think it's a CodeKit problem with Susy. I have tested it using the code of some online classes and it remains working oddly.
What can this be? Are there any prerequisites to placing elements in a certain column using Susy? Do I miss something here?
The at keyword is for use with isolation output. You can turn on isolation globally, if you want, but it adds some bulk to the output, and changes the way elements flow in a layout. Without isolation, Susy has no way of knowing anything about your DOM tree, or where an element lands in the default flow, or how to push it back and forth into place — so you need to set that explicitly in relation to the default, using the margin mixins (pre/post/push/pull).
[at is also used for asymmetrical grids, but it solves a different problem in that case.]
I'm wondering whether it is possible to set the element margin-left based on the value of a counter, using CSS3.
In other words, having a HTML like this:
<section>A</section>
<section>B</section>
<section>C</section>
have first block with a margin-left: 0em, second one with 1em and so on.
So far, I have tried the following:
section
{
counter-increment: sect-indent;
margin-left: calc(counter(sect-indent) * 1em);
}
But it seems that calc() doesn't support getting counter values.
Is such a thing possible using CSS3? I'm not interested in solutions involving ECMAScript.
It only works inside the content property, not like a variable the way you are thinking of it. If you view it in DevTools or the like, it's not an integer. You'd still see counter(myCounter) in there.
"In CSS 2.1, the values of counters can only be referred to from the 'content' property." source
For a Small Set
If you are dealing with a small set of section elements next to each other (as your sample shows), then using the adjacent sibling selector (or nth-of-type if only CSS3 support is desired) will get you what you want without counting. However, probably much more than about five elements and the css could get too cumbersome, so if you are looking at this for hundreds of elements, it is not practical.
section { margin-left: 0}
section + section {margin-left: 1em}
section + section + section {margin-left: 2em}
For single-line (or otherwise same-height) items you can use a following hack:
section::before {
content: '';
float: left;
height: 1.5em; /* a bit more than line height */
width: 1em;
}
<section>A</section>
<section>B</section>
<section>C</section>
<section>D</section>
<section>E</section>