fbpx

CSS Styling

In Comparison to the original Volume which required over 350 lines of CSS, Volume remastered uses less that 50. But why do we need CSS when Blocks does it all? I hear you ask. Well there are somethings that i just like to tweak and sometimes a little CSS is required.

The CSS added to the Site can be found in Customizer > Additional CSS. Lets take a closer look at what each of them does

Post navigation

the default behaviour of the Post Navigation Block Element is to display a 50/50 row showing the previous and next post. The following CSS removes the empty space when a user is on the first or last post so the block spans the full width.

/* Custom Post Navigation remove empty classes */
.featured-navigation .gb-grid-column:empty {
    flex: 0 1;
}

@media(min-width: 769px) {
    .featured-navigation .gb-grid-column:not(:empty) {
        flex: 1 0;
    }
}

Single Post Featured Images

the following CSS adjusts the featured image background size for tablet, and removes it from Mobile

/* Single Post Hero image responsive controls */
@media(max-width: 1024px) and (min-width: 769px) {
    .page-hero-block:before {
        background-size: cover;
    }
    .featured-column,
    .featured-column img.wp-post-image {
        width: 100% !important;
    }
}

@media(max-width: 768px) {
    .page-hero-block:before {
        background: none;
    }
}

Post Archives align meta to bottom of post

A simple flex box CSS to push the last element in the post-summary ( the post meta ) to align vertically at the bottom of the post.

/* Post Archives - force post meta to vertically align bottom */
.generate-columns-container .post>.gb-container,
.generate-columns-container .post>.gb-container>.gb-inside-container,
.post-summary>.gb-inside-container {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.post-summary {
    flex: 1;
}

.post-summary>.gb-inside-container>*:last-child {
    margin-top: auto;
}

Border radius on post archive images

/* Add border radius to post archive images */
.generate-columns-container .dynamic-featured-image {
    border-radius: 4px;
}

ORGANIZA TU VIAJE CON DESCUENTOS ;)


  • CONSIGUE AQUÍ tu tarjeta eSIM internacional con un 5% de DESCUENTO (Código 'MOCHILEROSTV').
  • RESERVA los traslados desde cualquier AEROPUERTO

Videoperiodista, documentalista y aventurero. Entre mayo de 2006 y junio de 2007 realicé uno de los grandes viajes de mi vida: la ruta panamericana. De esta aventura nace el documental “La costura de América” que narra este viaje en solitario de 45.000 kilómetros, realizado íntegramente por tierra y más de 11 meses desde Prudhoe Bay (Alaska) hasta Bahía Lapataia en Tierra de Fuego (Argentina). He trabajado como corresponsal de la Agencia EFE en la India y realizado decenas de reportajes sobre turismo, cultura y sociedad para el canal de televisión español Telecinco. En enero de 2014 estuve nominado en los Premios Goya con mi cortometraje documental "La Alfombra Roja" rodado en un slum de India y que lleva acumuladas más de 130 selecciones en festivales de cine de todo el mundo. Sigue mis viajes en mi blog de viajes o mis redes sociales: Twitter, Facebook, Instagram y Instagram