Search code examples
cssruby-on-railsbourbonneat

Bourbon Neat -- outer-container not full width of browser

I have a div that I want to act as a full-width header. Basically, the title and maybe a phone number and address. The aim of this question is to make this div the full width of the browser.

New to Bourbon Neat

  • My impression is that it works with a 12-grid column
  • So for a div to take up the whole width of the browser I used @include span-columns(12)
  • When I view it in my browser, looks like there are 2 empty columns on the left and the right

application.html.erb

<!DOCTYPE html>
<html>
<head>
  <title>LawRails</title>
  <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
  <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
  <%= csrf_meta_tags %>
</head>
<body>
<%= render "layouts/header" %>
<%= yield %>

</body>
</html>

header.html.erb

<div class="contain-header">
<div class = "last-names">Attorney & Attorney</div>
</div>

header.css.scss

.contain-header {
    @include outer-container;

    .last-names {
        background: blue;
        @include span-columns(12);
    }
}

Observations

When I remove @include outer-container it seems that I've achieved the desired effect. However, all the docs say to use this outer-container. I don't want unpredictable behavior as I am new to Bourbon Neat.

Solution

  • You need to set the $max-width of `@outer-container'. By default it has a limited max width as most pages want to at some point stop expanding.

    you can set your container element to: .element { @include outer-container(100%); }

    but as some point it might fall appart at larger screen sizes (think 19" plus moniters), so you may want to make the max width argument just something bigger than normal (like 2000px or something), but not 100%.

    neat docs link http://thoughtbot.github.io/neat-docs/latest/#outer-container (check the parameters section)