Menu icon Foundation

My Posts

  • 5
    Replies
  • bg images not displaying on ipad

    By E B

    I created a landing page, but am having issue with ipad (and some iphone) devices not displaying all the images. The gray boxes are background images set in css. Any leads on why they would not display? Using the most recent version of foundation.

    Last Reply by E B over 3 years ago


  • NEW
  • Want image to bleed div

    By E B

    imageimgbleedoverflowoff-grid

    I was looking at Foundation case studies and was interested to know how you got the #sideDevice image to exceed the div. I tried to replicate with an 6-column div and image id set to max-width:200%. http://foundation.zurb.com/learn/case-washington-pos... (continued)



My Comments

E B commented on E B's post over 3 years

I had a foolish error in my css breaking everything.

Thanks for taking a look!

E B commented on E B's post over 3 years

Any insight would be appreciated. I don't have the device to test on!

1) Missing bg-image code:

<div class="panel li-blue-trans">
    <div class="row">
      <div class="small-12 medium-5">
        <h1 class="hero-text">Text</h1>
        <p class="hero-text">Text</p>
      </div>
    </div>
</div>

.li-blue-trans {
  height:330px;
  background: url('hero.png') center center no-repeat;
  background-color: #deeef5; 
}
@media screen and (max-width: 655px) {
        .li-blue-trans {
          background: linear-gradient(
            rgba(222, 238, 245, 0.60), 
            rgba(222, 238, 245, 0.60)
          ),
      url('hero.png') center center no-repeat;
      background-color: #deeef5; 
        }
    }


2) Missing bg-color code:

<div class="panel aqua">
  <div class="row">
    <div class="small-12 medium-6 large-3 columns">
      <img src="img/thing.png">
      <h6>Focus</h6>
      <p>Text text text.</p>
    </div>
  </div>
</div>
.aqua {
  background-color: #0a9a89;
  height:340px;
  color:#fff;
  text-align: center;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2), (max-width: 640px) {
  .aqua {
    height: 1130px;
  }
}
@media only screen and (min-width: 641px) and (max-width: 1024px) {
  .aqua {
    height: 620px;
  }
}

E B commented on Sergio Osorio's post over 4 years

Did you try adding a class to the div?

<div class="large-12 medium-12 columns">modal here</div>

E B commented on Jacques Surveyer's post almost 5 years

There are two ways you can address it (http://symbolcodes.tlt.psu.edu/bylanguage/french.html)

individual character replacements

 ``` <p> Boucherville est une ville dans la r&eacute;gion de la Mont&eacute;r&eacute;gie au Qu&eacute;bec, Canada. </p>



or in the head of your website: use one of the language codes: fr , fr-FR (Parisian French/France), fr-CA (Canadian French), fr-BE (Belgian French). I imagine you're using unicode (utf-8). I haven't done this, and looking at view-source:http://www.sncf.com/ they put lang="fr" in the html tag. 


```HTML 
<meta http-equiv="Content-Type" content="text/html; charset=fr ">

E B commented on E B's post almost 5 years

Was writing it out and the form didn't post. So I thought it might be easier to see it (not) work in code pen: http://codepen.io/ebaca/pen/FgxHi

Can't get the push/transition functionality

E B commented on E B's post almost 5 years

Apologies for messy code. Also not sure of all the aspects that are playing into the transition, but I believe its all below. I am not getting the push to function. I left the mask in the JS, but I am not looking to use that functionality.

<nav class="menu push-menu-top">
    <ul>
        <li><button class="close-menu">Close</button></li>
        <li><a href="#">Will format later</a></li>
    </ul>
</nav>

<div id="main">
        <div class="container">
            <div class="buttons">
                <button class="nav-toggler toggle-push-top">Push Menu Top</button>
            </div>
</div>
</div>

/**
 * The nav stuff
 */
(function( window ){

  'use strict';

  var body = document.body,
    mask = document.createElement("div"),
    togglePushTop = document.querySelector( ".toggle-push-top" ),
    pushMenuTop = document.querySelector( ".push-menu-top" ),
    activeNav
  ;
  mask.className = "mask";



  /* push menu top */
  togglePushTop.addEventListener( "click", function(){
    classie.add( body, "pmt-open" );
    document.body.appendChild(mask);
    activeNav = "pmt-open";
  } );


  /* hide active menu if mask is clicked */
  mask.addEventListener( "click", function(){
    classie.remove( body, activeNav );
    activeNav = "";
    document.body.removeChild(mask);
  } );

  /* hide active menu if close menu button is clicked */
  [].slice.call(document.querySelectorAll(".close-menu")).forEach(function(el,i){
    el.addEventListener( "click", function(){
      classie.remove( body, activeNav );
      activeNav = "";
      document.body.removeChild(mask);
    } );
  });


})( window );

body {
    overflow-x: hidden
}

#wrapper {
    position: relative;
    z-index: 10;
    top: 0;
    left: 0;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}



/* Menus */
/* general style for all menus */
nav.menu {
    position: fixed;
    z-index: 20;
    background-color: #67b5d1;
    overflow: hidden;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}


/* pu sh menu top */

nav.push-menu-top {
    left: 0;
    width: 100%;
    height: 100px;
}

nav.push-menu-top ul {
    text-align: center;
    padding: 25px 0 0 0;
}

nav.push-menu-top li {
    display: inline-block;
    margin: 0;
    vertical-align: middle;
}

nav.push-menu-top a {
    display: block;
    line-height: 50px;
    padding: 0 10px;
    font-size: 18px;
}

nav.push-menu-top button.close-menu {
    display: block;
    line-height: 50px;
    margin: 0;
    padding: 0 10px;
}

nav.push-menu-top {
    top: -100px
}

body.pmt-open nav.push-menu-top {
    top: 0
}

body.pmt-open #wrapper {
    top: 100px
}
body.pmb-open #wrapper {
    top: -100px
}

Posts Followed


Following

    No Content

Followers

My Posts

My Comments

You commented on E B's post over 3 years

I had a foolish error in my css breaking everything.

Thanks for taking a look!

You commented on E B's post over 3 years

Any insight would be appreciated. I don't have the device to test on!

1) Missing bg-image code:

<div class="panel li-blue-trans">
    <div class="row">
      <div class="small-12 medium-5">
        <h1 class="hero-text">Text</h1>
        <p class="hero-text">Text</p>
      </div>
    </div>
</div>

.li-blue-trans {
  height:330px;
  background: url('hero.png') center center no-repeat;
  background-color: #deeef5; 
}
@media screen and (max-width: 655px) {
        .li-blue-trans {
          background: linear-gradient(
            rgba(222, 238, 245, 0.60), 
            rgba(222, 238, 245, 0.60)
          ),
      url('hero.png') center center no-repeat;
      background-color: #deeef5; 
        }
    }


2) Missing bg-color code:

<div class="panel aqua">
  <div class="row">
    <div class="small-12 medium-6 large-3 columns">
      <img src="img/thing.png">
      <h6>Focus</h6>
      <p>Text text text.</p>
    </div>
  </div>
</div>
.aqua {
  background-color: #0a9a89;
  height:340px;
  color:#fff;
  text-align: center;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2), (max-width: 640px) {
  .aqua {
    height: 1130px;
  }
}
@media only screen and (min-width: 641px) and (max-width: 1024px) {
  .aqua {
    height: 620px;
  }
}

You commented on Sergio Osorio's post over 4 years

Did you try adding a class to the div?

<div class="large-12 medium-12 columns">modal here</div>

You commented on Jacques Surveyer's post almost 5 years

There are two ways you can address it (http://symbolcodes.tlt.psu.edu/bylanguage/french.html)

individual character replacements

 ``` <p> Boucherville est une ville dans la r&eacute;gion de la Mont&eacute;r&eacute;gie au Qu&eacute;bec, Canada. </p>



or in the head of your website: use one of the language codes: fr , fr-FR (Parisian French/France), fr-CA (Canadian French), fr-BE (Belgian French). I imagine you're using unicode (utf-8). I haven't done this, and looking at view-source:http://www.sncf.com/ they put lang="fr" in the html tag. 


```HTML 
<meta http-equiv="Content-Type" content="text/html; charset=fr ">

You commented on E B's post almost 5 years

Was writing it out and the form didn't post. So I thought it might be easier to see it (not) work in code pen: http://codepen.io/ebaca/pen/FgxHi

Can't get the push/transition functionality

You commented on E B's post almost 5 years

Apologies for messy code. Also not sure of all the aspects that are playing into the transition, but I believe its all below. I am not getting the push to function. I left the mask in the JS, but I am not looking to use that functionality.

<nav class="menu push-menu-top">
    <ul>
        <li><button class="close-menu">Close</button></li>
        <li><a href="#">Will format later</a></li>
    </ul>
</nav>

<div id="main">
        <div class="container">
            <div class="buttons">
                <button class="nav-toggler toggle-push-top">Push Menu Top</button>
            </div>
</div>
</div>

/**
 * The nav stuff
 */
(function( window ){

  'use strict';

  var body = document.body,
    mask = document.createElement("div"),
    togglePushTop = document.querySelector( ".toggle-push-top" ),
    pushMenuTop = document.querySelector( ".push-menu-top" ),
    activeNav
  ;
  mask.className = "mask";



  /* push menu top */
  togglePushTop.addEventListener( "click", function(){
    classie.add( body, "pmt-open" );
    document.body.appendChild(mask);
    activeNav = "pmt-open";
  } );


  /* hide active menu if mask is clicked */
  mask.addEventListener( "click", function(){
    classie.remove( body, activeNav );
    activeNav = "";
    document.body.removeChild(mask);
  } );

  /* hide active menu if close menu button is clicked */
  [].slice.call(document.querySelectorAll(".close-menu")).forEach(function(el,i){
    el.addEventListener( "click", function(){
      classie.remove( body, activeNav );
      activeNav = "";
      document.body.removeChild(mask);
    } );
  });


})( window );

body {
    overflow-x: hidden
}

#wrapper {
    position: relative;
    z-index: 10;
    top: 0;
    left: 0;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}



/* Menus */
/* general style for all menus */
nav.menu {
    position: fixed;
    z-index: 20;
    background-color: #67b5d1;
    overflow: hidden;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}


/* pu sh menu top */

nav.push-menu-top {
    left: 0;
    width: 100%;
    height: 100px;
}

nav.push-menu-top ul {
    text-align: center;
    padding: 25px 0 0 0;
}

nav.push-menu-top li {
    display: inline-block;
    margin: 0;
    vertical-align: middle;
}

nav.push-menu-top a {
    display: block;
    line-height: 50px;
    padding: 0 10px;
    font-size: 18px;
}

nav.push-menu-top button.close-menu {
    display: block;
    line-height: 50px;
    margin: 0;
    padding: 0 10px;
}

nav.push-menu-top {
    top: -100px
}

body.pmt-open nav.push-menu-top {
    top: 0
}

body.pmt-open #wrapper {
    top: 100px
}
body.pmb-open #wrapper {
    top: -100px
}

Posts Followed

Following

  • No Content

Followers

  • No Content