remove padding on specific rows on mobile devices

app/assets/stylesheets/base.css.scss

@@ -101,3 +101,10 @@ body {
 .j2-navbar {
   margin-bottom: 0px;
 }
+
+@media (max-width: $screen-xs-max) {
+  .j2-col-reset {
+    padding-left: 0px;
+    padding-right: 0px;
+  }
+}

app/views/static/index.html.haml

@@ -3,7 +3,7 @@
   .container.j2-page
     .col-md-3.col-sm-3
       = render 'shared/sidebar'
-    .col-md-9.col-xs-12.col-sm-9
+    .col-md-9.col-xs-12.col-sm-9.j2-col-reset
       = render 'layouts/messages'
 
       #timeline

app/views/user/show.html.haml

@@ -1,9 +1,9 @@
 .profile--header
 .container.j2-page
-  .col-md-3.col-xs-12.col-sm-4
+  .col-md-3.col-xs-12.col-sm-4.j2-col-reset
     = render 'user/profile_info'
     .hidden-xs= render 'shared/links'
-  .col-md-9.col-xs-12.col-sm-8
+  .col-md-9.col-xs-12.col-sm-8.j2-col-reset
     = render 'shared/questionbox'
     #answers
       - @answers.each do |a|