I am in the process of creating a site using Foundation 3, but I cannot seem to get the responsive layout to work. The nav bar seems to be responsive when the screen size is changed, but none of the rest of the site works. Can anyone help as to how I can get the rest of

the site responsive?

You can view it here:

 

https://dl.dropboxusercontent.com/u/52725754/fight-back-jujitsu/index.html

 

Any help would be appricated.

Thanks

 

Awesome content I did Gracie Ju-Jitsu for a while but didn't have the lungs for it, despite loving it. Anyhoo....

 

I've not used Foundation 4, but Foundation 3 I would like to think I know a fair bit about it . Quite perplexing, but at a quick glance, your classes are a bit peculiar. Specifically

 

 six columnsNoPaddingLeft ie7columnshift
 

I just haven't used a class like that, so it doesn't mean it's wrong but perhaps it's not being picked up in your stylesheets. I've only had a quick glance but are you putting all your custom styles in app.css?

Thanks for your reply.

 

The classes that you mention are ones that I created to help fix issues with IE7 as Foundation 3 does not work well in that browser.

 

All the CSS that I have created is in styles.css and defaults.css. The app.css is what was with Foundation 3 and I have not put any custom styles into that.

 

I don't know why the nav bar changes when you resize the screen, but the rest of the content stays the same. Do you think it is something to do with those classes that you mentioned?

It could be. The most recent site I did with Foundation was probably around November time, so Foundation 3. With that I put all my custom styles in the app.css and only changed the fonts and hovers in the default stylesheets.

 

As the site is not live as such, try backing it up first then removing your custom classes. Zurb aren't fans of IE and I believe Foundation 3 was only for IE8 and above. I could be totally wrong but I do know that they have a strong stance on moving forward with web browsers and dropped a lot of support for the older versions of IE in their most recent Foundation release.

 

It may be a bit out of context but I've just retrieved that Foundation site and looked at my classes. The majority of my classes are standard

 

<div class="twelve columns panel">
 

The panel suffix was a generic term that adds a border to a <div> and a background. Other than that, all my classes were the standard two columns, five columns, etc...

 

Have a go at altering the classes first to see if it becomes responsive then re-assess whether you add separate IE stylesheets. I've got a feeling that that might be a step in the right direction

 

** Just re-read that. Some of my classes also used the mobile grid format too, but Foundation in general has an excellent grid system in my opinion

Thanks for your reply. I removed the style.css and defaults.css and the responsive stuff seemed to work. The slider was acting responsive.

 

I'm not sure how to get it too work properly using the styles that I created. I need it to work in IE7.

That's great news To be honest, I'm not so tolerant of IE so tend not to spend so much time on it. It might be worth looking at some other frameworks for pointers on how they deal with IE7. Bootstrap would be your first point of call but you could also look at getskeleton.com as when I designed with that, it supported IE7 (I think). You might be able to be 'inspired' by some of that code

I've used Bootstrap before, but thought I would try something new with Foundation. To be honest I didnt know that it didn't have great support for IE.

 

I will have to try and play around with getting it to work. At least you have put me on the right track.

 

Do you think it would be best to put my styles in the app.css?

You don't need to switch to Bootstrap as such - you might find a solution to help with your IE styles. I like Bootstrap but prefer Foundation.

 

I would suggest using the app.css for your custom styles - perhaps including all the IE references as should you need to update Foundation to say, Foundation 4, it would overwrite all your styles. It's very slightly similar to a child theme in WordPress.

 

I just checked their site and Foundation 3 supports IE 8 and above. The latest release practically drops 8 almost altogether Here is the Foundation 3 checklist http://foundation.zurb.com/old-docs/f3/support.php.

 

Apparently there is a polyfill for IE7 though. Check out this link http://www.stormconsultancy.co.uk/blog/development/code-snippets/making-zurb-foundation-3-work-on-ie7/. I haven't used it myself, but it might help you out in getting it to work without having to over edit your stylesheets.

i totally dont agree using frameworks for responsive webdesign

 

why not learn the basics first?

 

 

frameworks are loaded with lots of unnecessary code and would never help u learn the basics

 

it is almost like using dreamweaver over notepad++ before learning to code

 

 

 

 

use respond.js for making media quesries wrk in ie6-8

Edited April 12, 201313 yr by sash_oo7

I don't think this is a learning exercise as such as the OP wanted help with an existing site they have already created. Saying that, I hear you on learning how to do things from scratch. I learned how to make responsive sites from scratch before using frameworks. I don't use them now but the whole purpose from my point of view was, at that time, they did what was required for the client and within the budget.

 

Frameworks are essentially bits of code that have been tried and tested across multiple platforms to speed up workflow to create rapid prototyping (I'm not insinuating that they always work!). You have the choice whether you want to use them or not. If you want something bespoke, you can always create from scratch. It's down to preference and the criteria for a project.

i am not right against the use of frameworks.. i do agree with u that speeds up development.. but one should use it after they know the basics of responsive webdesign(media queries etc.. how they work!)

i am not right against the use of frameworks.. i do agree with u that speeds up development.. but one should use it after they know the basics of responsive webdesign(media queries etc.. how they work!)

 

Definitely agree with you on that. Media queries are our friend!