[Resolved] How can I make from scratch slider image from dispatch?

[David]

Can you share a link to your site so i can see the issue ?

[Anonymous]

Of course David my bad, I forgot to place it before is now on private section.

Also can you tell me if font size for headings (H1, H2, H3, H4, H5 and H6) is correct? Because on mobile it seems just too big especially on slider.

Thanks!

Sara

[David]

Headings look ok to me.
To reduce the font size just for the slider add this CSS:

@media(max-width: 768px) {
    .wpsp-grid h2.wp-show-posts-entry-title {
        font-size: 20px;
    }
}

To fix the issue with the post not filling the grid, find this CSS:

@media (max-width: 899px) and(min-width: 600px) {
    .wpsp-grid .wp-show-posts article {
        grid-column: span 4;
    }

    .wpsp-grid .wp-show-posts article:nth-child(3), .wpsp-grid .wp-show-posts article:nth-child(4) {
        grid-row: 3;
        grid-column: span 2; /* This line *.
    }
}

On the line i have /* commented */ – change span 2 to span 4

[Anonymous]

I have done what you mention, can you check it to see how it looks?

[David]

Looks good to me !

[Anonymous]

Yes the only problem is that first image on slider is not showing correctly, how I can fix that David?

Thanks!

[Anonymous]

I think this is the code, please check:

add_filter( 'generate_post_author', '__return_false' );
add_filter( 'generate_post_date_output', function( $date ) {
    printf( 
        '<span class="meta-gravatar">%s</span>',
        get_avatar( get_the_author_meta( 'ID' ) )
    );

    echo '<span class="meta-data">';

    printf( ' <span class="byline">%1$s</span>',
        sprintf( '<span class="author vcard" itemtype="http://schema.org/Person" itemscope="itemscope" itemprop="author"><a href="%1$s" title="%2$s" rel="author"><span class="author-name" itemprop="name">%3$s</span></a></span>',
            esc_url( get_author_posts_url( get_the_author_meta( 'ID' ) ) ),
            esc_attr( sprintf( __( 'View all posts by %s', 'generatepress' ), get_the_author() ) ),
            esc_html( get_the_author() )
        )
    );

    echo $date;

    echo '</span>';
} );

[Elvin]

Hi,

Yes the only problem is that first image on slider is not showing correctly, how I can fix that David?

This is what is looks on my end. https://share.getcloudapp.com/llu2orxe

It looks good already.

To clarify: perhaps what you want is equal image height on mobile?

[Anonymous]

Hello Elvin,

For what it seems you are seen this on tablet not mobile and Yes I have cleared my cache and browse on website on private navigation on firefox and incognito on chrome and as you can see on screenshot link I attach you this is what I see first slider image is not showing 100%.

Also I see on your video there is showing a lot of blanks on post listing can you please let me know why is that?

[David]

Ok.
So first the image fix – add this CSS:

@media(max-width: 768px) {
    .wpsp-grid article:first-child .wp-show-posts-image a img {
        height: 350px;
    }
}

You can reduce the 350px to suit – but it looks kinda right to me.

Now the author link fix. Try changing your code to this:

add_filter( 'generate_post_date_output', function( $date ) {
    printf( 
        '<span class="meta-gravatar">%s</span>',
        get_avatar( get_the_author_meta( 'ID' ) )
    );

    echo '<span class="meta-data">';

    printf( ' <span class="byline">%1$s</span>',
        sprintf( '<span class="author vcard" itemtype="http://schema.org/Person" itemscope="itemscope" itemprop="author"><span title="%1$s" class="author-name" itemprop="name">%1$s</span></span>',
            esc_html( get_the_author() )
        )
    );

    echo $date;

    echo '</span>';
} );

[Anonymous]

Hello David,

First slider image fix worked perfectly.

Secondly author link is been removed but, it come some small issue because of it if you go on mobile on publish date where it says “Actualizado:” and “Publicado:” it should show an space between that and date and its showing on desktop but, not on mobile can you tell me how I can fix this last thing?

Thank you very much!

[David]

Try adding this CSS:

.posted-on time:before {
    margin-right: 0.25em;
}

[Anonymous]

Worked Perfectly! Thanks a lot David! 🙂

[David]

You’re welcome

[Author]

Posts