home style fix (#6859)

* home style fix * new style .inline-fullwidth-content
publiclab · Nov 26, 2019 · ee8200e · ee8200e
1 parent d08117e
commit ee8200e
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 6 deletions.
diff --git a/app/assets/stylesheets/style.css b/app/assets/stylesheets/style.css
@@ -541,3 +541,14 @@ textarea, input {
 .form-grey {
   color:#888;
 }
+
+/* breaks out of #content div and presents edge-to-edge content without absolute positioning */
+.inline-fullwidth-content {
+  width:100vw;
+  margin:0 calc((100% / 2) - 50vw);
+}
+@media (min-width: 992px) {
+  .inline-fullwidth-content {
+    margin:0 calc((133% / 2) - 50vw);
+  }
+}
diff --git a/app/views/home/home.html.erb b/app/views/home/home.html.erb
@@ -11,7 +11,7 @@
       <% @projects.each_with_index do |project, index| %>
 
         <div class="row px-lg-5<%= " odd" if index.odd? %>">
-          <div class="col-6 col-xs-12 project-image <%= index.odd? ? " odd pr-lg-5 order-2" : " pl-lg-5" %>">
+          <div class="col-12 col-sm-6 project-image <%= index.odd? ? " odd pr-lg-5 order-2" : " pl-lg-5" %>">
 
             <% if project.main_image %>
               <a href="<%= project.path %>"><img src="<%= project.main_image.path(:default) %>" style="max-width:100%;" /></a>
@@ -20,7 +20,7 @@
             <% end %>
 
           </div>
-          <div class="col-6 col-xs-12<%= index.odd? ? " pl-lg-5" : " pr-lg-5" %>">
+          <div class="col-12 col-sm-6<%= index.odd? ? " pl-lg-5" : " pr-lg-5" %>">
 
             <h3><a href="<%= project.path %>"><%= project.title %></a></h3>
 
@@ -64,10 +64,9 @@
 <style>
 
 .projects {
-  width: 100%;
-  position: absolute;
-  left: 0;
-  padding: 40px 20px;
+  width: 100vw;
+  margin: 0 calc((100% / 2) - 50vw);
+  padding: 40px 15px;
 }
 .projects .row {
   padding: 50px 20px;