Monday, November 27, 2017

Add css over your blogger theme to get your blog more responsive

Blogger adds borders for bigger widths and doesn't show all the screen for small width, now you can solve this problem.



You can add css over your theme, you need go to blogger's back-end and select these options: Themes > Advanced > Add CSS.

I add these piece of code in my blog in order to get responsible widths, separate code, avoid overflow in images without deformations and something else:

body {
    min-width: 0px !important;
    padding: 0px;
}

.content-outer, .content-fauxcolumn-outer, .region-inner {
    min-width: 0px !important;
    max-width: 10000px !important;
}

th {
    background-color: #006600;
    color: #ffff99;
}

th, td {
    padding: 0.04em 0.3em;
}

code {
    background-color: white;
    padding: 0.2em 0.7em;
    margin: 0.5em;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.15);
    border-radius: 0 0 2px 2px;
    display: block;
}

.main-outer img {
    max-width: 99%;
    height: auto;
}

.post-body img, .post-body .tr-caption-container {
   background: none;
}


You might use the special theme for mobile, you need select theme, press the nut and activate mobile theme.

Artículo original en castellano

No comments:

Post a Comment