Menu icon Foundation
How to turn off responsive features on Foundation 5

i would like to ask if anyone know how to disable the responsive features of Foundation 5?

kind regards

Responsive

i would like to ask if anyone know how to disable the responsive features of Foundation 5?

kind regards

Shreekar Chonkar over 5 years ago

Hey, Jay.
Not adding any component to "row" class, should disable the responsiveness. Although i'm not so sure about this. You should give it a try.

Rafi Benkual over 5 years ago

@shreekar, The Foundation grid is based on responsive design with or without a class of row. Not adding the class="row" will cause the width to = 100% of page.

@Jay, the purpose of Foundation is to be responsive, so the answer is "there is no way". Having said that, can you describe in detail what you are trying to accomplish so we can get you a better answer?

Brandon Arnold over 5 years ago

You can just do everything with the small grid, but i wouldn't recommend using foundation for a non responsive project.

Whats your reasoning?

Jay Dcoder over 5 years ago

as a web developer i always want to have option to develop my client site either responsive or non responsive so that's my purpose using foundation to all my project, not using bootstrap if i want non responsive

Sergej Lotz over 5 years ago

Here is some information on it, start with "_settings.scss add (after // Grid)" paragraph:

http://docs.trollweb.no/display/polarthemes/Removing+responsiveness

Vincent Chan over 5 years ago

Yes, specially if we are using Foundation to create a Theme or Template for some CMS platform.
Joomla, wordpress, magento, drupal

It is best to have this function, because we do have over 50% of corporate website or corporate application that refuses to use responsive.

If we are doing desktop focus application, is foundation a good choice? or there some hacks that we can do to make it happen?

If we are doing template and let user to choose there responsive option: Yes or No. Because when we design an software, we cannot just say we think responsive should be taken a major role in this, and we will not support desktop only. I think this is good in business, like in bootstrap. I don't like the way they drop a lot of support in BS3, just because they think it is not important.

I think if Foundation can provide some documentation on how to disable responsive, it will help us alot.
So we don't need to hack anything. So it won't break anything.

Marc McGee over 5 years ago

i actually have a situation where I need to integrate code from and IDX service for real estate. Even though the provider has a version specific for mobile devices, the desktop version is not responsive. So I too will be faced with integrating a non-responsive element into a foundation site. I will give the small grid a try, but may need to investigate alternate IdX Providers.

Jeff Mears about 5 years ago

Has anyone found a clear solve for this?

We are several weeks into development and our client has changed their mind on responsive. Completely get it that Foundation is mobile first and that it's power is in its responsiveness. But starting over would be too costly.

Is there a simple way to turn off responsive for Foundation?

Salvatore Tolve about 5 years ago

Couldn't you just go through the CSS file and chage around the media queries so that the small, medium, and large are all using the large media query? That way it wouldn't break down? Just a thought not an answer.

Tuyet about 5 years ago

Delete row
HTML
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

Rafi Benkual about 5 years ago

@tuyet. That will cause it to show the small breakpoint only.

Sean Malone about 5 years ago

Wouldn't it be easier and more intuitive to wrap your page in a root container that has a static width? Something like this:

<div id="rootContainer">
    <div class="row">
        <div class="columns small-5">
            ....
        </div>
        <div class="columns small-7">
            ....
        </div>
    </div>
</div>
#rootContainer {
    width: 960px;
    width: 96rem;
    margin: auto;
}

Then you don't have to maintain two versions of Foundation. You just use the container if you need it, and leave it out if you want responsiveness back. This way, you're not hacking up the code. You're also able to still use the % driving features such as centering a column.

Crystal P almost 5 years ago

I found a javascript that would do exactly that. Its meant to switch between mobile and desktop version.

http://filzhut.net/projects/responsive-switch/

Although I'm having trouble with it. I'm not sure if I'm supposed to put it in the head of every page, because it seems to be repeating when I do that. But it really works like a charm.

Please let me know how it works for others who try this.

Andrew Patterson over 4 years ago

I may be late to the party on this one but there is a very simple solution.

Instead of having the width of the .row class at 100%, set it to the maximum width of your site.

Example:

.row { width: 62.5rem }

This will only affect outer rows (presumably your site width) as the width of inner rows is determined by the .row .row combination.

Andrew P.

Tobias L over 4 years ago

I've tried several of the suggestions here with mixed success

What worked (sort of)

The ideas that worked best were using a rootContainer div as Sean suggested, or setting the with of the .row class as Andrew suggested. However, these methods only work if you remember to use the small column class in all your columns. Otherwise the columns still stack when you shrink the viewport. And with either method, the heading font sizes still change when you shrink the viewport (but this isn't a bit deal).

What didn't work

The responsive-switch javascript code didn't work at all for me.

Removing the line didn't help at all. The page was still fluid and the columns still stacked.

What I didn't try

I didn't try editing the _settings.scss file as Sergej suggested because I want to be able to turn off responsiveness on a page by page basis. For the same reason I haven't tried changing the media queries as Salvatore suggested.

What next

Would love it if someone came up with a simple solution for this. It seems like it ought to be easy (?) just to have a switch that you could set on each page?

Tobias

Kohki over 4 years ago

Hi, there.

I tried to solve this matter, almost problems are fixed.
Although, some issues left, I satisfied enough.

  • mark up only .small-*
  • viewport initial scale removed
  • .row width fixed
  • remove meta.foundation by js

https://gist.github.com/kohki-shikata/2d640369724f8a36f635

left issues

sometimes .row elements aren't rendered as collect width.

Captain Bacon over 3 years ago

I am not too sure if its bullet proof but I used a mix of what Sean Malone Mentioned. Plus on the Foundation Settings file I switched
SASS
$breakpoint-classes: (small medium large); -> $breakpoint-classes: (small);

Then you can set the size of your site with the $global-width value.
This should also remove the font resizing.
You also have to use the small classes size your elements.

Feel free to have a spin!

Jiří Forst about 3 years ago

Im on foundation 6, i resolved it by setting all breakpoints on 0 and min-width of body to `$global-width`

body {
min-width: if($custom_responsibility_disabled, $global-width, auto);
}

 

$breakpoints: (
small: 0,
medium: if($custom_responsibility_disabled, 0, 640px),
large: if($custom_responsibility_disabled, 0, 1024px),
xlarge: if($custom_responsibility_disabled, 0, 1200px),
xxlarge: if($custom_responsibility_disabled, 0, 1440px)
);