How can I add CSS to a form in Rails when the form is rendered in two different locations?

Question

I have the full version of a form in the ContactUs Page. I also have a condensed version of the same form on the main index page. The condensed version required some CSS, but essentailly I am adding the CSS to both versions by using #new_customeras the selector. How can I have te CSS only applied to the condensed version on the index page ?

here is the CSS to show how I am using the selector (#new_customer).

@media only screen and (min-width : 320px) and (max-width : 480px) {
    #new_customer {margin-left: 14% !important; }
}
@media only screen and (min-width : 481px) and (max-width : 595px) {
    #new_customer {background: blue; margin-left: 14% !important; }
}
@media only screen and (min-width : 596px) and (max-width : 690px) {
    #new_customer {background: red; margin-left: 0%  !important; }
}
@media only screen and (min-width : 691px) and (max-width : 800px) {
    #new_customer {background: orange; margin-left:-50%  !important; }
}
@media only screen and (min-width : 801px) and (max-width : 1199px) {
    #new_customer {background: black; margin-left:-30% !important; }
}

And here is my home_controller that contains both forms

class HomeController < ApplicationController
  def index
    @customer=Customer.new
  end

  def services
  end

  def testimonials
  end

  def contact
    @customer=Customer.new
  end
end

Here is the actual customers\_form.html.erb

<%= form_for @customer, :html => { :class => 'form-horizontal' } do |f| %>
  <div class="control-group">
    <%= f.label :cust_fname,'First Name', :class => 'control-label' %>
    <div class="controls">
      <%= f.text_field :cust_fname, :class => 'text_field' %>
    </div>
  </div>
  <div class="control-group">
    <%= f.label :cust_lname,'Last Name', :class => 'control-label' %>
    <div class="controls">
      <%= f.text_field :cust_lname, :class => 'text_field' %>
    </div>
  </div>
  <div class="control-group">
    <%= f.label :cust_phone,'Phone', :class => 'control-label' %>
    <div class="controls">
      <%= f.text_field :cust_phone, :class => 'text_field' %>
    </div>
  </div>
  <div class="control-group">
    <%= f.label :cust_email,'Email', :class => 'control-label' %>
    <div class="controls">
      <%= f.text_field :cust_email, :class => 'text_field' %>
    </div>
  </div>
  <div class="control-group">
    <%= f.label :cust_address,'Address', :class => 'control-label' %>
    <div class="controls">
      <%= f.text_field :cust_address, :class => 'text_field' %>
    </div>
  </div>
  <div class="control-group">
    <%= f.label :cust_city,'City', :class => 'control-label' %>
    <div class="controls">
      <%= f.text_field :cust_city, :class => 'text_field' %>
    </div>
  </div>
  <div class="control-group">
    <%= f.label :cust_state,'State', :class => 'control-label' %>
    <div class="controls">
      <%= f.select :cust_state, [['Illinois','Illinois'],
          ['Indiana','Indiana'],
         ] %>
    </div>
  </div>
  <div class="control-group">
    <%= f.label :cust_zip,'Zip', :class => 'control-label' %>
    <div class="controls">
      <%= f.text_field :cust_zip, :class => 'text_field' %>
    </div>
  </div>
  <div class="control-group">
    <%= f.label :cust_property, 'Type', :class => 'control-label' %>
    <div class="controls">
      <%= f.radio_button :cust_property,'Residential', :class => 'radio_button' %> Residential
      <%= f.radio_button :cust_property,'Commercial', :class => 'radio_button' %> Commercial
    </div>
  </div>
  <div class="control-group">
    <%= f.label :cust_notes, :class => 'control-label' %>
    <div class="controls">
      <%= f.text_area :cust_notes, :class => 'text_area' %>
    </div>
  </div>

  <div class="cust_button">
    <%= f.submit "Send", :class => 'btn btn-primary',:style => 'position:absolute; right:600px' %>

  </div>
<% end %>

and here is the condensed version in layouts._indexform.html.erb

<%= form_for @customer, :html => { :class => 'form-horizontal',:style =>'margin-left:-13%'} do |f| %>
    <fieldset>
        <div class="control-group">

        <div class="controls">
          <%= f.text_field :cust_fname, :class => 'text_field', :placeholder =>"First Name" %>
        </div>
        </div>
        <div class="control-group">

        <div class="controls">
          <%= f.text_field :cust_lname, :class => 'text_field', :placeholder =>"Last Name" %>
        </div>
        </div>
        <div class="control-group">

        <div class="controls">
          <%= f.text_field :cust_phone, :class => 'text_field', :placeholder =>"Phone" %>
        </div>
        </div>
        <div class="control-group">

        <div class="controls">
          <%= f.text_field :cust_email, :class => 'text_field', :placeholder =>"Email" %>
        </div>
        </div>

        <div class="control-group">

        <div class="controls">
          <%= f.radio_button :cust_property,'Residential', :class => 'radio_button' %> Residential
          <%= f.radio_button :cust_property,'Commercial', :class => 'radio_button' %> Commercial
        </div>
        </div>
        <div class="control-group">

        <div class="controls">
          <%= f.text_area :cust_notes, :class => 'text_area', :placeholder =>"How can we help ?" %>
        </div>
        </div>

        <div class="">
        <%= f.submit "Send", :class => 'btn btn-primary',:style => "background:green; margin-left:50%" %>

        </div>
    </fieldset>
<% end %>

Answer 1

I got it to work by applying the CSS to the <div> tag that contains the condensed form.

I gave the <div> tag a class of =test like <div class=test >. Then I applied media queries to the .test selector in the bootstrap_and_overrides.css file like this

@media only screen and (min-width : 320px) and (max-width : 480px) {
    .test {margin-left: 25% !important; }
    .cust_button {right: 25% !important; }
}
@media only screen and (min-width : 481px) and (max-width : 595px) {
    .test {background: blue; margin-left: 14% !important; }
    .cust_button {right: 25% !important; }
}
@media only screen and (min-width : 596px) and (max-width : 690px) {
    .test {background: red; margin-left: 10%  !important; }
    .cust_button {position:absolute; margin-right: 15% !important; }
}
@media only screen and (min-width : 691px) and (max-width : 800px) {
    .test {background: orange; margin-left:-44%  !important; }
}
@media only screen and (min-width : 801px) and (max-width : 1199px) {
    .test {background: black; margin-left:-20% !important; }

Now it only applies the CSS to this particular version of the form and not every instance of the form.