Voor Timdehoog.nl maak ik gebruik van het Phlox thema. Van de week zag ik bij een langere blog dat de verticale grijze sidebar lijnen niet tot het einde van de pagina liepen. Dit probleem deed zich alleen voor als het middelste content blok langer was dan de content in de sidebars.
De hoogte van de sidebar en daarmee ook de grijze lijn wordt middels Javascript berekend. Dit zorgt ervoor dat een willekeurige hoogte in pixels wordt toegekend aan de sidebars links en rechts van de content. Het zou mooier zijn geweest als de sidebars 100% hoog zijn zonder Javascript te gebruiken.
Ongewenste resultaat:
Om ervoor te zorgen dat de lijnen tot onderen doorlopen heb ik onderstaande CSS gebruikt. Kort samengevat komt het erop neer dat ik de lijnen verplaats van de sidebar naar het middelste content blok.
Afhankelijk van de pagina indeling die je kiest moet je hier misschien nog wat wijzigingen in doorvoeren. Plaats dit blok CSS in de style.css van je child theme of in de customizer van het parent theme. Vergeet niet verschillende pagina’s en apparaten te testen.
/* Solve the border problems when the content section is longer then the sidebars. */
#primary {
border-right: 1px solid #EAEAEA
}
.single #primary {
border-left: 1px solid #EAEAEA;
}
.home #primary {
border-left: none;
}
@media screen and (max-width: 1140px) {
.single #primary {
border-left: none;
}
}
@media screen and (max-width: 767px) {
#primary {
border-right: none;
}
}
.aux-sidebar-primary {
border-left: none !important;
border-right: none !important;
}
.aux-sidebar-secondary {
border-left: none !important;
border-right: none !important;
}
Gewenste resultaat:
