Make cards flush on mobile

resources/views/timeline/personal.blade.php

@@ -6,8 +6,8 @@
 
 @section('content')
 
-<div class="container">
-  <div class="col-12 col-md-8 offset-md-2 pt-4">
+<div class="container p-0">
+  <div class="col-md-8 mx-auto pt-4 px-0">
     @if ($errors->any())
       <div class="alert alert-danger">
           <ul>
@@ -27,7 +27,7 @@
 
     @endforeach
     @if($timeline->count() == 0)
-    <div class="card">
+    <div class="card card-md-rounded-0">
       <div class="card-body py-5">
         <div class="d-flex justify-content-center align-items-center">
           <p class="lead font-weight-bold mb-0">{{ __('timeline.emptyPersonalTimeline') }}</p>
@@ -37,11 +37,11 @@
     @endif
     </div>
 
-    <div class="page-load-status">
-      <div class="infinite-scroll-request">
-        <div class="d-none fixed-top loading-page"></div>
+    <div class="page-load-status" style="display: none;">
+      <div class="infinite-scroll-request" style="display: none;">
+        <div class="fixed-top loading-page"></div>
       </div>
-      <div class="infinite-scroll-last">
+      <div class="infinite-scroll-last" style="display: none;">
         <h3>No more content</h3>
         <p class="text-muted">
           Maybe you could try 
@@ -49,7 +49,7 @@
           more people you can follow.
         </p>
       </div>
-      <div class="infinite-scroll-error">
+      <div class="infinite-scroll-error" style="display: none;">
         <h3>Whoops, an error</h3>
         <p class="text-muted">
           Try reloading the page