Fix responsive around sidebar on blog (#8610)

layouts/blog/baseof.html

@@ -12,11 +12,11 @@
 			<h1>Kubernetes Blog</h1>
 		</section>
 		<div class="container-fluid" style="padding-top: 2em">
-			<div class="row blog-content">
+			<div class="row">
-				<div class="col-xs-10 col-sm-9 col-lg-9 text">
+				<div class="col-xs-12 col-md-9 text blog-content">
 					{{ block "main" . }}{{ end }}
 				</div>
-				<div class="col-xs-1 col-sm-1 col-sm-3 col-lg-3 text">
+				<div class="col-xs-12 col-md-3 text">
 					<div class="widget-content">
 						{{ with .Site.Home.OutputFormats.Get "rss" -}}
 						<link rel="{{ .Rel }}" type="{{ .MediaType.Type }}" href="{{ .Permalink | safeURL }}" title="{{ $.Site.Title }}">

static/css/blog.css

@@ -5,11 +5,6 @@
 
 /* Content
 ----------------------------------------------- */
-.container-fluid {
-  padding: 0px;
-  margin: 0px;
-  padding-left: .01 em;
-}
 body {
   font: normal normal 16px 'Trebuchet MS', Trebuchet, Verdana, sans-serif;
   color: #666666;
@@ -147,9 +142,6 @@ div.header-try a {
   position: relative;
   left: 30%;
   }
-  .pagination a {
-    margin-right: 30%;
-  }
 }
 
 @media (min-width: 450px) {
@@ -164,13 +156,13 @@ div.header-try a {
 .main-outer {
   border-top: 0 solid transparent;
 }
-@media (min-width: 500px) {
+@media (min-width: 992px) {
   .blog-content {
-    padding-left: 100px;
+    padding-left: 50px;
   }
 }
 
-@media (max-width: 499px) {
+@media (max-width: 991px) {
   .blog-content {
     padding-left: 20px;
   }
@@ -282,7 +274,7 @@ h3.post-title{
   position: relative;
   display: block;
   box-sizing: border-box;
-  padding: 0 0 0 55px;
+  padding: 0 0 0 15px;
   margin: 10px 0;
   line-height: 40px;
   white-space: nowrap;
@@ -384,6 +376,10 @@ body {
     margin-left: 1em;
   }
 
+  .blog-content .PageNavigation > ul.navigation, .blog-content .PageNavigation > ul.navigation > li {
+    margin-left: auto;
+  }
+
   /* .blog-content .pagination {
     width: inherit;
   } */
@@ -488,6 +484,14 @@ img.big-img {
   width: 100%;
 }
 
+.blog-content img {
+  max-width: 100%;
+}
+
+.blog-content .content {
+  overflow-x: scroll;
+}
+
 /* .content img {
 max-width: 100%;
 } */