CODEWITHSUNDEEP
cssruby-on-railsbourbonneat
ma77c
ma77c

Reputation: 1086

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

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.

Upvotes: 1

Views: 4314

Answers (1)

JustH
JustH

Reputation: 1402

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)

Upvotes: 5

Related Questions