Menu icon Foundation

Designer | Santa Barbara, CA

Creative Services Veteran Writer, Designer, Director, Developer Seeking Work For Hire/Freelance Now

My Posts



My Comments

Bobby Fritze commented on Robben's post almost 4 years

Hey Robben, I think that the reason GTMetrix and Google interpret that markup differently is (I'm paraphrasing from Chrome Inspector) the presence of explicit width="XY" and height="XY" attributes on the img tag helps the browser to "allocate room" if you will, for that image to render.

Your issue also with the above markup is similar to Zurb's suggestion to also include the default image inside a noscript tag.

Hope that makes sense and helps some other folks.

Happy coding!

Bobby Fritze commented on Hari Harker's post almost 4 years

I'm not good with expressions in .htaccess, but someone on SO said this worked...
(I guess it would depend on if it's a UNIX server or nginx server or other)

location ~* .(eot|otf|ttf|woff)$ {
add_header Access-Control-Allow-Origin *;
}

Source: http://red-team-design.com/firefox-doesnt-allow-cross-domain-fonts-by-default/

I've also seen suggestions about using Base64.

P.S.
I think it's worth noting that webkit browsers don't need the .woff file.
Even IE11 renders the Foundation Icons.

Bobby Fritze commented on Sébastien Domange's post about 4 years

This turned out pretty nicely for me:

<div class="row">
  <div class="xxlarge-12 xlarge-12 large-12 medium-12 small-12 columns">
    <div id="map-canvas"></div><!--your gmap-->
    <div id="textoverlay"><!--layer other elements onto the map-->
    <h1>Check out our Map</h1>
    </div>
       </div>
</div>
#map-canvas{
width: 100%;
height: 666px;
float:left;
padding-bottom: 2rem;
z-index:1;
}
#textoverlay{
position: absolute;top: 7%;left:45%;margin:0 0 0 -13%;z-index:2;
}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait)
{
#textoverlay{position: absolute;top: 7%;left:42%;margin:0 0 0 -16%;
}}
@media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio:3)
{
#textoverlay{position: absolute;top: 7%;left:40%;margin:0 0 0 -15%;height:360px!important;
}}

Bobby Fritze commented on Bobby Fritze's post over 4 years

Agustin, thank you very much for playing with it.
Moving the class="exit-off-canvas" UP inside the /section as you suggested actually did not work for me, but moving it outside the off-canvas-wrap div did happen to work. Funky!
It fixed the issue in question for IE11, Chrome 43.0.2357.124 on OSX and Chrome for Android Lollipop.

So now, the markup looks like so (my comment on the section is true for all other pages... :
HTML
</section><!--ALL MAIN CONTENT MUST BE INSIDE THIS CLOSING SECTION TAG OR THE NAV TAB WONT WORK-->
</div><!--end the inner-wrap-->
</div><!--end the off-canvas-wrap-->
<a class="exit-off-canvas"></a>

Bobby Fritze commented on Bobby Fritze's post over 4 years

Hi Rafi, thank you for the reply; right here: http://sppreview.scratchpadcellars.com/stores.html

Posts Followed





Following

    No Content

Followers

My Posts

My Comments

You commented on Robben's post almost 4 years

Hey Robben, I think that the reason GTMetrix and Google interpret that markup differently is (I'm paraphrasing from Chrome Inspector) the presence of explicit width="XY" and height="XY" attributes on the img tag helps the browser to "allocate room" if you will, for that image to render.

Your issue also with the above markup is similar to Zurb's suggestion to also include the default image inside a noscript tag.

Hope that makes sense and helps some other folks.

Happy coding!

You commented on Hari Harker's post almost 4 years

I'm not good with expressions in .htaccess, but someone on SO said this worked...
(I guess it would depend on if it's a UNIX server or nginx server or other)

location ~* .(eot|otf|ttf|woff)$ {
add_header Access-Control-Allow-Origin *;
}

Source: http://red-team-design.com/firefox-doesnt-allow-cross-domain-fonts-by-default/

I've also seen suggestions about using Base64.

P.S.
I think it's worth noting that webkit browsers don't need the .woff file.
Even IE11 renders the Foundation Icons.

You commented on Sébastien Domange's post about 4 years

This turned out pretty nicely for me:

<div class="row">
  <div class="xxlarge-12 xlarge-12 large-12 medium-12 small-12 columns">
    <div id="map-canvas"></div><!--your gmap-->
    <div id="textoverlay"><!--layer other elements onto the map-->
    <h1>Check out our Map</h1>
    </div>
       </div>
</div>
#map-canvas{
width: 100%;
height: 666px;
float:left;
padding-bottom: 2rem;
z-index:1;
}
#textoverlay{
position: absolute;top: 7%;left:45%;margin:0 0 0 -13%;z-index:2;
}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait)
{
#textoverlay{position: absolute;top: 7%;left:42%;margin:0 0 0 -16%;
}}
@media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio:3)
{
#textoverlay{position: absolute;top: 7%;left:40%;margin:0 0 0 -15%;height:360px!important;
}}

You commented on Bobby Fritze's post over 4 years

Agustin, thank you very much for playing with it.
Moving the class="exit-off-canvas" UP inside the /section as you suggested actually did not work for me, but moving it outside the off-canvas-wrap div did happen to work. Funky!
It fixed the issue in question for IE11, Chrome 43.0.2357.124 on OSX and Chrome for Android Lollipop.

So now, the markup looks like so (my comment on the section is true for all other pages... :
HTML
</section><!--ALL MAIN CONTENT MUST BE INSIDE THIS CLOSING SECTION TAG OR THE NAV TAB WONT WORK-->
</div><!--end the inner-wrap-->
</div><!--end the off-canvas-wrap-->
<a class="exit-off-canvas"></a>

You commented on Bobby Fritze's post over 4 years

Hi Rafi, thank you for the reply; right here: http://sppreview.scratchpadcellars.com/stores.html

Posts Followed

Following

  • No Content

Followers

  • No Content