Overflow issue with Bourbon Neat

Design Front End Development
1

Hi,

I’m putting finishing touches on my latest Rails app, witch uses Bourbon Neat and Refills as front end framework:

http://188.226.157.101

My repository is located here: https://github.com/acandael/beautysalonapp2

Currently I’m having some sort of overflow issue where content within div is getting outside it’s box.

The above image was taken with a browser width for mobile screens.

The weird things is that the overflow issue dissapears when the page gets refreshed.

To get boxes of equal heights I’m using the matchHeight.js jQuery plugin.

At the moment, I’m not sure if the issue is caused by matchHeight.js , or if has another cause.

Did anyone else experience this overflow issue with his/her Bourbon Neat website?

thanks for your help,

Anthony

2

I think I solved the issue. The matchHeight.js jQuery plugin seems to conflict with the Bourbon @clearfix mixin. I removed the mixin from the div’s where I had the overflow issue, and now the overflow issue seems fixed.

3

nope, it wasn’t the @clearfix mixin.

Still having the overflow issue, seems like a tough one : (

For a moment I thought it was caused by Typekit webfont, so I installed the asynchronous load script (the ‘advanced script’), but that doesn’t seems to fix the overflow issue either.

The though part is that the issue hard to reproduce, because when the page is refreshed, the issue is gone.

Any help, or advice would be really appreciated

greetings,

Anthony

4

Why is it important to have boxes with equal height?

It makes sense to me to have boxes that adapt to the length of the text…

5

@acandael_acanda, I would only match heights if your boxes are alongside each other. For our company’s app, we implement that behavior with jQuery.equalHeights (be careful, as there are several plugins/forks with the same name), and we only execute equalheights if the window is narrower than a certain width.

You may have to bind a function to the window resize event if you think your users might resize their window.

6

Hi Ed,

On mobile screens, the boxes with unequal height are not an issue, but on desktop and laptop screens they pose a layout issue.

Anyways, the issue seems gone now:

http://178.62.173.211

7

Hi Geoff,

I’m using the matchHeight.js plugin

you can set equal heights for an element by calling the matchHeight() function on elements with the same class, like this:

<script>
  $(document).ready(function () {
    $('.block').matchHeight();
  });
</script>

or you can use the data-match-height attribute (or the shortcut data-mh) on the elements for witch you want to set equal heights, like this

<div class="box1" data-mh="block">
  ...
</div>

<div class="box2" data-mh="block">
  ...
</div>

here the value for the data-mh attribute is totally arbitrary, you can call it whatever you want. The matchHeight plugin will set equal heights for all elements with the same data-mh attribute value.

I am know again calling the mathHeight function from within a script on my page, and the overflow issue seems gone.

It would be of help, if you could test it yourself and check that the overflow issue is gone on:

http://178.62.173.211

thanks for your help,

Anthony