Menu icon Foundation

Coder | Boulder, CO

My Posts

No Content

My Comments

Lynda Spangler commented on Vinyl's post almost 5 years

See if this works:

.top-bar-section li:not(.has-form) a:hover:not(.button) {
    background:#9BBE2D;
}

Lynda Spangler commented on Irfan Sattar's post almost 5 years

Try changing the line-height. I have had to do that to center an item vertically.

Lynda Spangler commented on James Ralph's post almost 5 years

I am unsure how to help you as I would first think of Fastclick but you already removed it. A tool which may help you is JS Beautify : http://jsbeautifier.org/ - You can unminify code using that tool and it may help you decipher the code.

Lynda Spangler commented on Irfan Sattar's post almost 5 years

They are just using a background image.

Here is their code. As you will notice they are wrapping the rows with a section. Then they add a background image to the section. Here is a Pen that replicated the home page background: http://cdpn.io/Asgno

<section id="homepage-hero">

  <div class="row">
    <div class="medium-7 large-6 columns">
      <h1>Foundation</h1><br>
      <h3>The most advanced responsive <br class="hide-for-small">front-end framework in the world.</h3>
      <br>
    </div>
  </div>


  <div class="row">
    <div class="large-4 medium-6 columns">
      <a class="large button hide-for-small" href="http://foundation.zurb.com/develop/download.html">Download Foundation 5</a>
      <a class="small button show-for-small" href="http://foundation.zurb.com/develop/download.html">View Download Options</a>
    </div>
  </div>

</section>

Lynda Spangler commented on Katherine Elsken's post about 5 years

I am using Megafolio and Foundation without a problem.

Try commenting out the jquery.themepunch.plugins.min.js script. I had to do that in my case for it to work correctly.

IE:

<!-- <script src="/js/megafolio/js/jquery.themepunch.plugins.min.js"></script> -->

I also added this to my CSS:

.mg-container{  /* This is the wrapper around the Megafolio Container*/
   max-width:1260px;
   min-width:240px;
   width:auto;
   margin:auto;
   padding:0px 30px;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
   overflow: hidden;
}

.megafolio-container{  
  width:100%; 
   position:relative;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
}

My HTML:

<div class="mg-container">
   <div class="megafolio-container">

    <!-- GALLERY ENTRY CODE -->

   </div>
</div>


Lynda Spangler commented on Lynda Spangler's post about 5 years

I believe this is a webkit issue more than just Chrome.

Lynda Spangler commented on Lynda Spangler's post about 5 years

I posted this as an issue on Github: https://github.com/zurb/foundation/issues/4629

Lynda Spangler commented on Lynda Spangler's post about 5 years

I opened a Github Issue here: https://github.com/zurb/foundation/issues/4628

Lynda Spangler commented on Lynda Spangler's post about 5 years

I used position: absolute; left: 0; bottom:0; and that worked in my case.

Lynda Spangler commented on Lynda Spangler's post about 5 years

Thank you both for the help. I was able to make it happen using position:absolute. It would be nice to see this ability built in to Equalizer.

Posts Followed

No Content

Following

    No Content

Followers

My Posts

No Content

My Comments

You commented on Vinyl's post almost 5 years

See if this works:

.top-bar-section li:not(.has-form) a:hover:not(.button) {
    background:#9BBE2D;
}

You commented on Irfan Sattar's post almost 5 years

Try changing the line-height. I have had to do that to center an item vertically.

You commented on James Ralph's post almost 5 years

I am unsure how to help you as I would first think of Fastclick but you already removed it. A tool which may help you is JS Beautify : http://jsbeautifier.org/ - You can unminify code using that tool and it may help you decipher the code.

You commented on Irfan Sattar's post almost 5 years

They are just using a background image.

Here is their code. As you will notice they are wrapping the rows with a section. Then they add a background image to the section. Here is a Pen that replicated the home page background: http://cdpn.io/Asgno

<section id="homepage-hero">

  <div class="row">
    <div class="medium-7 large-6 columns">
      <h1>Foundation</h1><br>
      <h3>The most advanced responsive <br class="hide-for-small">front-end framework in the world.</h3>
      <br>
    </div>
  </div>


  <div class="row">
    <div class="large-4 medium-6 columns">
      <a class="large button hide-for-small" href="http://foundation.zurb.com/develop/download.html">Download Foundation 5</a>
      <a class="small button show-for-small" href="http://foundation.zurb.com/develop/download.html">View Download Options</a>
    </div>
  </div>

</section>

You commented on Katherine Elsken's post about 5 years

I am using Megafolio and Foundation without a problem.

Try commenting out the jquery.themepunch.plugins.min.js script. I had to do that in my case for it to work correctly.

IE:

<!-- <script src="/js/megafolio/js/jquery.themepunch.plugins.min.js"></script> -->

I also added this to my CSS:

.mg-container{  /* This is the wrapper around the Megafolio Container*/
   max-width:1260px;
   min-width:240px;
   width:auto;
   margin:auto;
   padding:0px 30px;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
   overflow: hidden;
}

.megafolio-container{  
  width:100%; 
   position:relative;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
}

My HTML:

<div class="mg-container">
   <div class="megafolio-container">

    <!-- GALLERY ENTRY CODE -->

   </div>
</div>


You commented on Lynda Spangler's post about 5 years

I believe this is a webkit issue more than just Chrome.

You commented on Lynda Spangler's post about 5 years

I posted this as an issue on Github: https://github.com/zurb/foundation/issues/4629

You commented on Lynda Spangler's post about 5 years

I opened a Github Issue here: https://github.com/zurb/foundation/issues/4628

You commented on Lynda Spangler's post about 5 years

I used position: absolute; left: 0; bottom:0; and that worked in my case.

You commented on Lynda Spangler's post about 5 years

Thank you both for the help. I was able to make it happen using position:absolute. It would be nice to see this ability built in to Equalizer.

Posts Followed

No Content

Following

  • No Content

Followers

  • No Content