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

Home Forums Support How can I make from scratch slider image from dispatch?

Viewing 14 posts - 31 through 44 (of 44 total)
  • Author
    Posts
  • #1494818
    David
    Staff
    Customer Support

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

    #1495127
    Sara

    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

    #1495303
    David
    Staff
    Customer Support

    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

    #1495674
    Sara

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

    #1495704
    David
    Staff
    Customer Support
    #1496113
    Sara

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

    Thanks!

    #1496118
    Sara

    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>';
    } );
    #1496210
    Elvin
    Staff
    Customer Support

    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?

    A wise man once said:
    "Have you cleared your cache?"

    #1496688
    Sara

    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?

    #1496798
    David
    Staff
    Customer Support

    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>';
    } );
    #1498292
    Sara

    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!

    #1498571
    David
    Staff
    Customer Support

    Try adding this CSS:

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

    Worked Perfectly! Thanks a lot David! 🙂

    #1499749
    David
    Staff
    Customer Support
Viewing 14 posts - 31 through 44 (of 44 total)
  • You must be logged in to reply to this topic.