All color sections now with that green bg-color to better see the borders.
To load those child themes alb – you had to put this into your child-theme functions.php
function avia_include_shortcode_template($paths){
$template_url = get_stylesheet_directory();
array_unshift($paths, $template_url.'/shortcodes/');
return $paths;
}
add_filter('avia_load_shortcodes', 'avia_include_shortcode_template', 15, 1);the grid-row.php file – with integrated divider option.
Now, we need to decide what should happen on responsive case when neighboring grid cells have both bottom or both top dividers. One possible solution is to only display the dividers of the first grid cell.
you have to have both files inside your child-theme/shortcodes folder
This is cell.php extended with the divider options.
here the top-divider is before – and the bottom divider is after the flex_cell_inner.
And on Grid-Cell set padding – now goes to flex_cell_inner.
.av-layout-grid-container .flex_cell:has(.avia-divider-svg) {
/* === to overwrite the standard padding of 30px in grid-row.css === */
padding: 0 !important;
}
@media only screen and (max-width: 767px) {
.responsive #top #wrap_all .av-flex-cells .no_margin {
padding-left: 0 !important;
padding-right: 0 !important;
}
}
.av-layout-grid-container .flex_cell .avia-divider-svg {
width: inherit;
left: inherit;
}
.av-layout-grid-container .flex_cell_inner {
display: inline-block;
}possible solution for responsive style on having flex_cell neighbors both with top and or bottom dividers.
Only the first flex_cell with a top or bottom divider inside a av-layout-grid-container got that extra class.
function flex_cell_neighbours_fix(){
?>
<script>
document.addEventListener('DOMContentLoaded', () => {
const containers = document.querySelectorAll('.av-layout-grid-container');
containers.forEach(container => {
const firstCellWithTopDivider = container.querySelector('.flex_cell:has(.avia-divider-svg-top)');
const firstCellWithBottomDivider = container.querySelector('.flex_cell:has(.avia-divider-svg-bottom)');
if (firstCellWithTopDivider) {
firstCellWithTopDivider.classList.add('first_cell_with_top_divider');
}
if (firstCellWithBottomDivider) {
firstCellWithBottomDivider.classList.add('first_cell_with_bottom_divider');
}
});
});
</script>
<?php
}
add_action('wp_footer', 'flex_cell_neighbours_fix');@media only screen and (max-width: 989px) {
.av-layout-grid-container.av-break-at-tablet .flex_cell:not(.first_cell_with_top_divider) .avia-divider-svg-top {
display: none;
}
.av-layout-grid-container.av-break-at-tablet .flex_cell:not(.first_cell_with_bottom_divider) .avia-divider-svg-bottom {
display: none;
}
}
@media only screen and (max-width: 767px) {
.av-layout-grid-container .flex_cell:not(.first_cell_with_top_divider) .avia-divider-svg-top {
display: none;
}
.av-layout-grid-container .flex_cell:not(.first_cell_with_bottom_divider) .avia-divider-svg-bottom {
display: none;
}
}Leftside Cell ist with divider (bow and superhero) – one svg file – but nested – to have parts growing and not preserving aspect ratio.
One part ( that superhero ) should preserve aspect ratio.
