Mobile fixes for the splash

app/assets/stylesheets/breakpoints.css.scss

@@ -8,11 +8,11 @@
   }
  
   @else if $class == md {
-    @media (min-width: 970px) { @content; }
+    @media (min-width: 992px) { @content; }
   }
  
   @else if $class == lg {
-    @media (min-width: 1170px) { @content; }
+    @media (min-width: 1200px) { @content; }
   }
  
   @else {

app/assets/stylesheets/osem-splash.css.scss

@@ -1,3 +1,5 @@
+@import "breakpoints.css.scss";
+
 #splash {
   // Counter the general padding for #content
   margin-bottom: -60px;
@@ -65,10 +67,28 @@
   }
 
   #lodging {
-    .img-lodging {
+    @include breakpoint(xs) {
+      .img-lodging{
+        max-width: 280px;
+      }
+    }
+    @include breakpoint(sm) {
+      .img-lodging{
+        max-width: 200px;
+      }
+    }
+    @include breakpoint(sm) {
+      .img-lodging{
+        max-width: 260px;
+      }
+    }
+    @include breakpoint(lg) {
+      .img-lodging{
+        max-width: 300px;
         max-height: 200px;
       }
     }
+  }
   
   #sponsors {
     .img-sponsor {
@@ -83,6 +103,12 @@
     .img-sponsor-3 {
       max-height: 120px;
     }
+    @include breakpoint(xs) {
+      .img-sponsor, .img-sponsor-1, .img-sponsor-3, .img-sponsor-3{
+        max-height: unset;
+        max-width: 280px;
+      }
+    }
   }
 
   #social-media{
@@ -101,6 +127,11 @@
     a:nth-child(-n+1) {
       padding-left: 0px;
     }
+    @include breakpoint(xs) {
+      a{
+        padding-left: 10px;
+      }
+    }
   }
   
   .scroll-top-wrapper {

app/views/conference/_call_for_papers.html.haml

@@ -10,7 +10,7 @@
       %p.lead
         We are ready to accept your proposals for sessions!
   .row
-    .col-md-6.col-md-offset-3
+    .col-md-6.col-md-offset-3.col-sm-10.col-sm-offset-1
       %p
         - if @conference.event_types.any?
           You can submit proposals for

app/views/conference/_lodging.html.haml

@@ -7,7 +7,7 @@
   - @conference.lodgings.each_slice(3) do |slice|
     .row.row-centered
       - slice.each do |lodging|
-        .col-md-4.ticket.col-centered.col-top
+        .col-md-4.col-sm-4.ticket.col-centered.col-top
           .thumbnail
             - if lodging.photo.blank?
               %p.text-center

app/views/conference/_program.html.haml

@@ -12,7 +12,7 @@
         - @conference.tracks.each_slice(3) do |slice|
           .row.row-centered
             - slice.each do |track|
-              .col-md-4.col-centered.col-top.track
+              .col-md-4.col-sm-4.col-centered.col-top.track
                 %h4.text-center
                   = track.name
                 = markdown(track.description)

app/views/conference/_sponsors.html.haml

@@ -15,7 +15,7 @@
       - sponsorship_level.sponsors.each_slice(3) do |slice|
         .row.row-centered
           - slice.each do |sponsor|
-            .col-md-4.col-centered.col-top
+            .col-md-4.col-sm-4.col-centered.col-top
               .thumbnail
                 - if sponsor.logo.blank?
                   %h3.text-center

app/views/conference/_tickets.html.haml

@@ -9,7 +9,7 @@
   - @conference.tickets.each_slice(4) do |slice|
     .row.row-centered
       - slice.each do |ticket|
-        .col-md-3.col-centered.col-top
+        .col-md-3.col-centered.col-top.col-sm-3
           .thumbnail
             %p.text-center
               %i.fa.fa-ticket.fa-5x

app/views/conference/show.html.haml

@@ -6,7 +6,7 @@
           .col-md-8.col-md-offset-2#header
             .row
               .col-md-4
-                = image_tag(@conference.logo(:original), class: 'img-responsive', id: 'splash-logo') if @conference.logo?
+                = image_tag(@conference.logo(:original), class: 'img-responsive img-center', id: 'splash-logo') if @conference.logo?
               .col-md-8
                 %h1
                   = @conference.title