Fix responsive around sidebar on blog (#8610)

This commit is contained in:
T N 2018-06-05 19:52:54 +09:00 committed by k8s-ci-robot
parent 474cf809d0
commit 3c1c581de6
2 changed files with 19 additions and 15 deletions

View File

@ -12,11 +12,11 @@
<h1>Kubernetes Blog</h1>
</section>
<div class="container-fluid" style="padding-top: 2em">
<div class="row blog-content">
<div class="col-xs-10 col-sm-9 col-lg-9 text">
<div class="row">
<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 }}">

View File

@ -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%;
} */