-
Foundation // Respond.js
Hi Guys,
Bit of an amateur when it comes to responsive design however – at work we are considering re-designing our site and making it responsive. I’ve been playing around with Foundation 4 from ZURB and have been very impressed – my issue is I need the grid to work in IE8.
After doing some reading up I seem to have found a potential solution by including respond.js – This is the bit where I really am an amateur. I have tried adding the script and referencing it but no cigar – I just can’t seem to get it to work.
Any help on where to include the conditional script tag in my HTML or alternatively a different solution would be fantastic. I would be much obliged if someone out there could help me out with this!
Thanks in Advance!
-
8 Replies
-
hello…
can you post your code for us to see? hard to offer advice blind… :-/
sitruc
-
Here’s the code.
<!DOCTYPE html>
<!--[if IE 8]> <![endif]-->
<!--[if gt IE 8]><!--> <!--<![endif]--><!-- Set the viewport width to device width for mobile -->
Welcome to Foundation
-
<!-- Title Area -->
- PsychoCannon
- Menu
<!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
<!-- Left Nav Section -->
- Main Item 1
- Main Item 2
- Main Item 3
- Dropdown Level 1a
- Dropdown Level 2 Label
- Dropdown Level 2a
- Dropdown Level 2b
- Dropdown Level 2c
- Dropdown Level 3 Label
- Dropdown Level 3a
- Dropdown Level 3b
- Dropdown Level 3c
- Dropdown Level 2d
- Dropdown Level 2e
- Dropdown Level 2f
- Dropdown Level 1b
- Dropdown Level 1c
- Dropdown Level 1d
- Dropdown Level 1e
- Dropdown Level 1f
- See all →
- Dropdown Level 1a
<!-- Right Nav Section -->
- Main Item 4
- Dropdown Level 1 Label
- Dropdown Level 1a
- Dropdown Level 1b
- Dropdown Level 1c
- Dropdown Level 1 Label
- Dropdown Level 1d
- Dropdown Level 1e
- Dropdown Level 1f
- See all →
- Button!
PsychoCannon
Click here for extended information.
BOOM
<!-- End Header and Nav -->
<!-- First Band (Slider) -->
<!--
-->
<!-- Three-up Content Blocks -->
This is a content section.Bacon ipsum dolor sit amet nulla ham qui sint exercitation eiusmod commodo, chuck duis velit. Aute in reprehenderit, dolore aliqua non est magna in labore pig pork biltong. Eiusmod swine spare ribs reprehenderit culpa. Boudin aliqua adipisicing rump corned beef.
This is a content section.Bacon ipsum dolor sit amet nulla ham qui sint exercitation eiusmod commodo, chuck duis velit. Aute in reprehenderit, dolore aliqua non est magna in labore pig pork biltong. Eiusmod swine spare ribs reprehenderit culpa. Boudin aliqua adipisicing rump corned beef.
This is a content section.Bacon ipsum dolor sit amet nulla ham qui sint exercitation eiusmod commodo, chuck duis velit. Aute in reprehenderit, dolore aliqua non est magna in labore pig pork biltong. Eiusmod swine spare ribs reprehenderit culpa. Boudin aliqua adipisicing rump corned beef.
<!-- Call to Action Panel -->
Get in touch!We'd love to hear from you, you attractive person you.
<!-- Call to Action Panel -->
- Standard
- $99.99
- An awesome description
- 1 Database
- 5GB Storage
- 20 Users
- Buy Now
- Standard
- $99.99
- An awesome description
- 1 Database
- 5GB Storage
- 20 Users
- Buy Now
- Standard
- $99.99
- An awesome description
- 1 Database
- 5GB Storage
- 20 Users
- Buy Now
<!-- Footer -->
document.write('')
$(document).foundation();
<!-- End Footer -->
-
hello…
and where in here have you tried posting what and what happens when you say it doesn’t work? does it work in other browsers fine but not ie8?
sitruc
-
Hi Curtis,
I have tried adding the respond.js in the standard places eg. right after the stylesheet links, above the style sheet links, before the closing body tag – with no joy.
Yes the page works fine in everything except IE8 and unless I’m mistaken I thought adding respond.js would resolve the problem with the responsive 12 column grid system which the Foundation 4 framework uses.
-
Sorry the file I was trying to add was the respond.js if I didn’t mention that before.
-
hello…
did you read their docs/support page on this, perchance?
https://foundation.zurb.com/docs/support.html
“Want IE8 Grid Support? We know it can be hard to get clients to ditch support for IE8. We’re hoping with the auto-update to IE10 release from Microsoft, we won’t need to worry about it anymore. Until then, here’s a gist with a grid that will work in IE8, just like it did in Foundation 3.”
this might do what you need…
sitruc
-
Your html code is missing all the required classes to make the foundation grid work at all. Do you have an online version for us to inspect?
/*—————————————————-*/
System: Win7 64bit – i7 920@3.6Ghz, p6t Deluxe v1, 48gb (6x8gb RipjawsX), ATI 7970 3gb, EVGA 590 3GB, Revodrive X2 240gb, e-mu 1820. Screens: 2 x Samsung s27a850ds 2560×1440, HP 1920×1200 in portrait mode -
P.S. sometimes it’s easier to temporarily share large amounts of code via https://gist.github.com, https://pastebin.com, or https://jsfiddle.net.
-Nathan
—
Nathan Selikoff
Artist / Programmer
Interactive installations, audiovisual performances, graphics programming, technical direction
Reply to this Discussion! Login or Sign Up