Full width AND bottom aligned Read more button in Post Slider

For better instructions it would be nice to see the page. There are too many styling options on blog grid – that the selectors might be a bit different.

i have had a similar problem – the thing why this is not as easy as it seems to be is that the read-more link is part of the excerpt.
So i wrote this little script to rearange the DOM Structure
This comes to child-theme functions.php:

function wrap_read_more_link(){ 
?>
<script type="text/javascript">
(function($) {
    $(window).load(function(){
        $('.read-more-link').each(function() {
            $(this).parent().parent().append($(this));
        });
        $('.slide-entry').each( function() {
            $(this).find('.slide-content .entry-content-header').append($(this).find('.entry-footer'));
            $(this).find('.more-link' ).wrapInner('<span class="more"></span>');
        }); 
    });
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'wrap_read_more_link');

( i wrapped the more-link in a span to have more styling options)
After that the read-more link is last div in slide-content and could be placed absolute in the surrounding container:
this for quick css:

.read-more-link {
	position: absolute;
	bottom: 10px;
	right: 10px;
}
.avia-content-slider .slide-entry-excerpt {
    padding-bottom: 40px;
}

Resultspage: https://webers-testseite.de/blog-posts-in-list-view/

i now go and have a look if it is better to edit the alb element for that DOM Structure.

• This reply was modified 4 years, 4 months ago by Guenni007.

if you like to have those containers in equal height – the flexbox modell is helpfull here.

Unfortunately the articles are grouped according to the settings in 3, 4 etc columns. Without this grouping it would be even better with the flex-box model.
I’ll see if I can collect all articles and put them into one slide-entry-wrap.

by the way : this is with collecting all articles in one container that we can style it with flexmodell:

function wrap_read_more_link(){ 
if(is_page(37595)){
?>
<script type="text/javascript">
(function($) {
    $(window).load(function(){
        $('.read-more-link').each(function() {
            $(this).parent().parent().append($(this));
        });

        $('.slide-entry').each( function() {
            $(this).find('.slide-content .entry-content-header').append($(this).find('.entry-footer'));
            $(this).find('.more-link' ).wrapInner('<span class="weiter"></span>');
        }); 

        $('.avia-content-slider-inner .slide-entry-wrap .slide-entry').each( function() {
            $(this).detach().appendTo('.avia-content-slider-inner .slide-entry-wrap:first');
        });
        $('.avia-content-slider-inner .slide-entry-wrap:empty').remove();
    });
})(jQuery);
</script>
<?php
}
}
add_action('wp_footer', 'wrap_read_more_link');

this is only for my testpage – pagespecific.
But to reconfigure the DOM in this way it is not nice – it works but it takes time

Results see : https://webers-testseite.de/blog-posts-in-list-view/