Susy - Prevent Grid from creating a line break during transition

Question

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

shramee · Accepted Answer · 2016-06-14T10:30:15.050

0

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;
}

edited Jun 14 '16 at 10:30

answered Jun 14 '16 at 03:08

shramee

5,030
1
22
46

Didn't work, here's the codepen, http://codepen.io/anon/pen/jrqKrX, it seems to be working on mobile with the codepen. I'm hosting my site locally, and I'm accessing it from my phone, I'm completely lost as to why this isn't working. – Jun 14 '16 at 03:48
Try installing latest susy ( atleast use v2+ ) if you don't have it already, Also try reproducing the issue in codepen... You can also inspect the element to check any horizontal margin being adding. Also keep an eye on `box-sizing` it should be `border-box` ( or even `padding-box` would do if you don't have a border ). – shramee Jun 14 '16 at 05:14
I'm using susy v2.2.12, added box-sizing, and there is no margin. :( – Jun 14 '16 at 05:43
Ohh... Okay... lets try reproduce the issue in codepen... Add all your `css` to codepen. If issue is still not reproduced add a screenshot of your page ( so that we know what elements surround it... ) to your question... – shramee Jun 14 '16 at 07:27
I updated the codepen with all of the sass, and it works on codepen, but not on my website. – Jun 14 '16 at 09:17
Super, that worked. There's just a small white space, but I don't think it's a big deal. – Jun 14 '16 at 10:50

Susy - Prevent Grid from creating a line break during transition

1 Answers1