fix footer to bottom of page, adjust hero

sjfox26 · Apr 10, 2018 · 7482d9d · 7482d9d
1 parent 70b81cc
commit 7482d9d
Show file tree

Hide file tree

Showing 4 changed files with 150 additions and 96 deletions.
diff --git a/.idea/workspace.xml b/.idea/workspace.xml
diff --git a/app/assets/stylesheets/custom.scss b/app/assets/stylesheets/custom.scss
@@ -14,9 +14,15 @@ $gray-medium-light: #eaeaea;
 }
 
 /* GLOBAL STYLES */
-body {
+html, body {
  padding-top: 60px;
  font-family: "AvenirNext",Avenir,"Helvetica Neue",Helvetica,Arial,sans-serif;
+ height: 100vh; //https://stackoverflow.com/questions/10099422/flushing-footer-to-bottom-of-the-page-twitter-bootstrap
+}
+
+/*WRAP FOR LAYOUT */
+#wrap{
+ min-height: 100vh;
 }
 
 /* HEADER */
@@ -99,10 +105,12 @@ header {
 
 /* FOOTER STYLES */
 
-footer {
- position: fixed;
- bottom: 0; /*https://stackoverflow.com/questions/19330611/fixed-footer-in-bootstrap*/
- margin: 15px 0;
+.footer {
+ position: relative;
+ margin-top: -100px; /* negative value of footer height */ //https://stackoverflow.com/questions/10099422/flushing-footer-to-bottom-of-the-page-twitter-bootstrap
+ height: 100px;
+ clear:both;
+ padding-top:20px;
 }
 
 footer a {
@@ -127,9 +135,11 @@ footer ul li {
 
 
 /* HOME STYLES */
-.front_page_container{
+.page_container{
  padding-left: 0;
  padding-right: 0;
+ overflow: auto; //https://stackoverflow.com/questions/10099422/flushing-footer-to-bottom-of-the-page-twitter-bootstrap
+ padding-bottom: 100px; /* this needs to be bigger than footer height https://stackoverflow.com/questions/10099422/flushing-footer-to-bottom-of-the-page-twitter-bootstrap*/
 }
 
 .container_for_background{
@@ -218,15 +228,20 @@ footer ul li {
 }
 
 .tom_description_content{
- padding: 20px 30px;
+ padding: 20px 50px;
  font-size: 1.1em;
 }
 
 .services_container{
  margin-top: 20px;
+ text-align: center;
  //padding-left: 50px;
 }
 
+.services_container ul{
+ list-style-type: none;
+}
+
 #services{
 
 }
@@ -243,6 +258,7 @@ footer ul li {
  display: block;
  margin-left: auto;
  margin-right: auto;
+ margin-bottom: 60px;
  height: 15vh;
  padding: 10px 0px;
 }
@@ -396,4 +412,9 @@ h3{
 
 .center{
  text-align: center;
+}
+
+.contact_us_container{
+ margin-top: -40px;
+ padding-bottom: 100px;
 }
diff --git a/app/views/messages/new.html.erb b/app/views/messages/new.html.erb
@@ -1,27 +1,36 @@
-<div class="container">
- <div class="row">
+<div id="wrap">
+ <div class="page_container">
 
- <div class="col-md-8 col-md-offset-2">
+ <div id="front_page_picture">
+ <%= image_tag("fox_logo.jpg", alt: "Fox with paintbrush") %>
+ </div>
+
+ <div class="container">
+ <div class="row">
+
+ <div class="contact_us_container col-md-8 col-md-offset-2">
 
- <h1> Contact Fox Decorating</h1>
+  <h1> Contact Fox Decorating</h1>
 
- <p class="center"> Drop us a line and we will be in touch soon!</p><br/>
+  <p class="center"> Drop us a line and we will be in touch soon!</p><br/>
 
- <%= form_for @message, url: contact_path, method: :post do |f| %>
+  <%= form_for @message, url: contact_path, method: :post do |f| %>
 
- <%= f.label :name, "Name:" %>
- <%= f.text_field :name, class: 'form-control' %>
+  <%= f.label :name, "Name:" %>
+  <%= f.text_field :name, class: 'form-control' %>
 
- <%= f.label :phone_number, "Contact Phone:" %>
- <%= f.email_field :phone_number, class: 'form-control' %>
+  <%= f.label :phone_number, "Contact Phone:" %>
+  <%= f.email_field :phone_number, class: 'form-control' %>
 
- <%= f.label :body, "Optional Message:" %>
- <%= f.email_field :body, class: 'form-control' %>
+  <%= f.label :body, "Optional Message:" %>
+  <%= f.email_field :body, class: 'form-control' %>
 
- <% end %>
- <br/>
- <%= submit_tag("Contact Us", class: "btn btn-primary col-md-12") %>
+  <% end %>
+  <br/>
+  <%= submit_tag("Contact Us", class: "btn btn-primary col-md-12") %>
 
+ </div>
+ </div>
  </div>
  </div>
-</div>
+</div>