# Disabling responsiveness in main.css

**URL:** https://discourse.roots.io/t/disabling-responsiveness-in-main-css/542
**Category:** uncategorized
**Created:** 2013-10-15T14:49:54Z
**Posts:** 5

## Post 1 by @emaildano — 2013-10-15T14:49:55Z

Hello, how is the main.css file now disabled from allowing responsive features? I would like to tweak the responsive layout at a later date and keep the current markup intact.

There’s a similar article here: [Remove Responsive](http://discourse.roots.io/t/remove-responsive/231)

Although, this details the previous setup of Roots with App.css and the two Bootstrap stylesheets. Removing responsiveness was pretty simple with Bootstrap 2, by choosing which stylesheet you’d like to use.

Any suggestions or previous articles I may have missed?

---

## Post 2 by @enollo — 2013-10-15T18:03:12Z

Have you looked at [my response](http://discourse.roots.io/t/remove-responsive/231/3) in the thread you mentioned?

It provides an in-depth way of doing this with Bootstrap 3 and Roots 6.5.0 (both current releases)

I’ve pasted it below for your convenience:

* * *

[http://getbootstrap.com/getting-started/#disable-responsive](http://getbootstrap.com/getting-started/#disable-responsive)

In `templates/head.php` remove

```
<meta name="viewport" content="width=device-width, initial-scale=1.0">
```

In `assets/less/app.less` add:

```
.container {
   max-width: none !important;
   width: 970px;
}
```

In `header-top-navbar.php` remove `button.navbar-toggle` (line 4 to 9) and remove `.collapse` and `.navbar-collapse` classes from the `<nav>` element. It should look something like this when you are done:

```
<header class="banner navbar navbar-default navbar-static-top" role="banner">
  <div class="container">
    <div class="navbar-header">
      <a class="navbar-brand" href="<?php echo home_url(); ?>/" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>">
      	<?php bloginfo( 'name' );?>
      </a>
    </div>

    <nav role="navigation">
      <?php
        if (has_nav_menu('primary_navigation')) :
          wp_nav_menu(array('theme_location' => 'primary_navigation', 'menu_class' => 'nav navbar-nav'));
        endif;
      ?>
    </nav>
  </div>
</header>
```

In `lib/config.php` change the grid classes from `.col-sm-*` to `.col-xs-*` (lines 24, 27, 37)

```
/**
 * .main classes
 */
function roots_main_class() {
  if (roots_display_sidebar()) {
    // Classes on pages with the sidebar
    $class = 'col-xs-8';
  } else {
    // Classes on full width pages
    $class = 'col-xs-12';
  }

  return $class;
}

/**
 * .sidebar classes
 */
function roots_sidebar_class() {
  return 'col-xs-4';
}
```

Let me know if I missed anything and I will update this post.

Hope this helps

---

## Post 3 by @emaildano — 2013-10-15T21:39:37Z

Thanks a lot. I tried this but must have missed something. I’ll revisit your suggestion and post and update on how it turns out.

---

## Post 4 by @emaildano — 2013-10-17T21:10:46Z

@enollo, it worked!

I edited my theme somewhat so this wasn’t a perfect guide for me but out of the box it’s great.

Thanks.

---

## Post 5 by @jared_walters — 2013-12-03T00:49:21Z

Thank you very much for these instructions. I also noticed that the navbar continues to collapse even after making these changes. I’ve resolved the issue by setting `@screen-sm-min = 0px` (found on line 221 of assets/bootstrap/variables.less). I’m not sure if it’s the best fix but thought I’d mention it incase anyone else was running into the same issue.