Search code examples
csssasssusy

Susy - Prevent Grid from creating a line break during transition

I noticed on my phone, using this menu:

enter image description here

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:

enter image description here

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

Solution

  • 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...

    1. Check if version of Susy is atleast v2+
    2. 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.
    3. 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;
}