Aplicar css sobre el tema en blogger para hacerlo más adaptativo

Una cosa que nunca me ha hecho mucha gracia de blogger son los bordes que pone cuando tienes mucho ancho disponible y que no se vea todo cuando el ancho no es suficiente.

Afortunadamente esto tiene remedio y el resultado lo podéis ver desde hace poco tiempo en el blog, para ello hay que añadir algo de css y ajustar algunas cosas en el tema.

Para añadir css que prevalezca sobre el del tema tenemos que ir al backend de blogger a las opciones:

 

Temas ► Avanzado ► Añadir CSS.

En mi caso he añadido el siguiente trozo de código para que los anchos se adapten mejor, el código esté bien separado, las imágenes no se salgan de su zona sin deformarse y algunos ajustes más:

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;
}

Es conveniente usar el tema especial para móviles, para ello vamos a la opción tema y pulsamos en la tuerca que hay debajo de la vista previa para móviles, ya allí basta con activarlo.