Question posted in
The official Twillio API documentation can be found here.

Simple CSS misunderstanding with Rails App and Bootstrap – Twillio

I want to add a wrapper to my main div on the homepage of my site seen here ..I haven’t yet purchased an ssl cert.

I’m using bootstrap and this div has the container class. I want to wrap it in a div to provide a background ,similar to this twillio site.

This is a simple css manuever (or so I thought) so I’m sure I’m missing something on the rails/bootstrap side. I’m using several layouts, per rails convention, and after about 3 hours of trying to figure this out I’m afraid missing something deeper here. Thanks for your help on this.

<div class="center hero-unit" id="homegreen">
<h1>54footy</h1>
<iframe width="550" height="315" src="http://www.youtube.com/embed/1hQmlFzqJyo" frameborder="0" allowfullscreen></iframe>
<p>Your Heroes here -54footy</p>    
<%= link_to "Pick your Hero", signup_path, class: "btn btn-large btn-primary" %>    
<input type="text" data-provide="typeahead" data-source="["Option 1","Option 2","Option 3"]">
</div>

application.html.erb

<!DOCTYPE html>
<html>
 <head>
  <title><%= full_title(yield(:title)) %></title>
  <%= stylesheet_link_tag    "application", :media => "all" %>
  <%= javascript_include_tag "application" %>
  <%= csrf_meta_tags %>
  <%= render 'layouts/shim' %>
 </head>
 <body>
   <%= render 'layouts/header' %>
   <div class="container">
    <% flash.each do |key, value| %>
     <%= content_tag(:div, value, class: "alert alert-#{key}") %>
    <% end %>
    <%= yield %>
    <%= render 'layouts/footer' %>
    <%= debug(params) if Rails.env.development? %>
   </div>
 </body>
</html>

When I try to insert a div for the background it centers just like the container and I essentially want it to stretch the whole length of the page and have the div thats there now be centered content within the background. Very similar to the twillion site I listed as reference.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    In my static pages controller I added 

    render :layout => false

    Then, I copied my application layout I had in and put it in my home view. From there I was able to manipulate the home css in a way I wasn't able to before. Essentially adding above code in the question to the latter code in the question. 

     <!DOCTYPE html>
 <html>
  <head>
   <title><%= full_title(yield(:title)) %></title>
   <%= stylesheet_link_tag    "application", :media => "all" %>
   <%= javascript_include_tag "application" %>
   <%= csrf_meta_tags %>
   <%= render 'layouts/shim' %>
  </head>
  <body>
    <%= render 'layouts/header' %>
     <div id="wrapper" style="height:600px; background-color:red;">
      <div class="container">
    <% flash.each do |key, value| %>
      <%= content_tag(:div, value, class: "alert alert-#{key}") %>
    <% end %>
        <div>
          <span id="home_pic">
            <img src="http://placehold.it/550x315">
          </span>
        </div>
       </div>
     </div>
   <div class="container">
      <%= render 'layouts/footer' %>
     <%= debug(params) if Rails.env.development? %>
   </div>   
  </body>
 </html>

    There is obv nothing DRY about this. Anyone else think of a better way to do this, I'm positive there is this was just my fix. Thanks.


  2. 0

    The first thing I see is that you don’t close that 

    <div class="center hero-unit" id="homegreen">

    try adding a </div> in the end… 😀

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search