Menu icon Foundation

My Posts

  • 30
    Replies
  • Orbital Height Issues

    By Greg Blass

    Orbitsliderheight

    For some reason, orbital doesn't seem to adjust to the right height when I load my page. It either has a height of 0px, or just enough height to match the height of the bullets (when I enable them). As soon as I resize my browser (or open dev tools), i... (continued)

    Last Reply by jessica ndaye over 4 years ago


  • 5
    Replies
  • Orbit jumps around on load

    By Greg Blass

    Orbit

    I'm on chrome on OSX 10.9, and the orbit slider jumps around on a page load. You can see each individual slide for a split second with <li> bullets to the left of them before the javascript executes on the example page (and the same thing is happening for... (continued)

    Last Reply by Clement over 5 years ago


My Comments

Greg Blass commented on Greg Blass's post over 5 years

Actually, if I refresh the page, for some reason its about half the size. Sigh...

So this is still an issue.

Might have to go with another slider until this issue is addressed.

Greg Blass commented on Greg Blass's post over 5 years

This is one (hackish) way that I just was able to workaround the issue:

jQuery(document).ready(function($) {
    $(window).trigger('resize');
  });

Not really sure why this is necessary. If anyone can shed some light - that'd be great. For now, this will do the trick for me.

Greg Blass commented on Fernando Galeano's post over 5 years

OK I've figured out a much better answer to this one.

If you use .row as your main container, then when you use row again for your columns inside that row, the following CSS will be applied:

.row .row {
margin-left: -0.9375rem;
margin-right: -0.9375rem;
}

This will remove the left and right gutter width automatically that you are looking to get rid of.

This confused me at first as well. I actually used chrome dev tools to look at the code behind this very forum to figure it out.

Hope this helps!

Greg Blass commented on Fernando Galeano's post over 5 years

I came here to ask the same question. If anyone has any better solutions than this, I'm all ears! Basically I'm just going to have to write responsive overrides.

I really don't think there should be padding-left on the first column and pading-right on the last column in any case.

I feel like that should be default?

Greg Blass commented on James Webb's post almost 6 years

You're overthinking it. Both are pretty simple to get started with if you understand CSS and JS. Think of them as tools to help make your life easier.

Just follow the docs to use foundation when you need to implement certain components. Need a grid? Check out the documentation and implement it. Need a lightbox? Same. Need a slider? Same.

SASS is just a next gen CSS. I've found it useful for nesting and using variables, and compass (or bourbon) mixins. If you've worked with CSS for a while, you'll quickly learn and appreciate these luxuries.

Just my 2 cents.

Posts Followed

No Content

Following

    No Content

Followers

My Posts



My Comments

You commented on Greg Blass's post over 5 years

Actually, if I refresh the page, for some reason its about half the size. Sigh...

So this is still an issue.

Might have to go with another slider until this issue is addressed.

You commented on Greg Blass's post over 5 years

This is one (hackish) way that I just was able to workaround the issue:

jQuery(document).ready(function($) {
    $(window).trigger('resize');
  });

Not really sure why this is necessary. If anyone can shed some light - that'd be great. For now, this will do the trick for me.

You commented on Fernando Galeano's post over 5 years

OK I've figured out a much better answer to this one.

If you use .row as your main container, then when you use row again for your columns inside that row, the following CSS will be applied:

.row .row {
margin-left: -0.9375rem;
margin-right: -0.9375rem;
}

This will remove the left and right gutter width automatically that you are looking to get rid of.

This confused me at first as well. I actually used chrome dev tools to look at the code behind this very forum to figure it out.

Hope this helps!

You commented on Fernando Galeano's post over 5 years

I came here to ask the same question. If anyone has any better solutions than this, I'm all ears! Basically I'm just going to have to write responsive overrides.

I really don't think there should be padding-left on the first column and pading-right on the last column in any case.

I feel like that should be default?

You commented on James Webb's post almost 6 years

You're overthinking it. Both are pretty simple to get started with if you understand CSS and JS. Think of them as tools to help make your life easier.

Just follow the docs to use foundation when you need to implement certain components. Need a grid? Check out the documentation and implement it. Need a lightbox? Same. Need a slider? Same.

SASS is just a next gen CSS. I've found it useful for nesting and using variables, and compass (or bourbon) mixins. If you've worked with CSS for a while, you'll quickly learn and appreciate these luxuries.

Just my 2 cents.

Posts Followed

No Content

Following

  • No Content

Followers

  • No Content