WordPress.org

Ready to get started?Download WordPress

Forums

Changing the excerpt length when using a media query (1 post)

  1. jamo_dodger
    Member
    Posted 6 months ago #

    Hello i have recently changed the layout of my blog posts using Alchymyths method:

    <article id="post-<?php the_ID(); ?>" <?php $extra = ( ( $wp_query->current_post % 5 == 0 && !is_paged() ) ? 'full' : 'half' ) . ( ( ( $wp_query->current_post % 5 == 1 || $wp_query->current_post % 5 == 3 ) && !is_paged() ) ? ' left' : '' ); post_class($extra); ?>>

    I have then used two excerpt lengths for the larger posts (full) and the smaller posts (half) again using the following suggested by Alchymyth:

    function twentytwelvechild_custom_excerpt_length( $length ) {
    	global $wp_query;
    	if( $wp_query->current_post%5 == 0 ) return 60;
    	else return 12;
    }
    add_filter( 'excerpt_length', 'twentytwelvechild_custom_excerpt_length', 12 );

    This all works perfectly and I have styled the 'half' posts to be 50% the size of the 'full' ones. However I have added a media query to my CSS:

    @media screen and (max-width: 767px) {
    	#content .half {
    		width: 100%;
    		min-height: none;
    		max-height: none;
    	}
    	.half .entry-header .entry-title a {
    		font-size: 1.8rem;
    	}
    	.site-content article .half {
    		padding-bottom: 2rem;
    	}
    }

    It makes the smaller posts with the class 'half' display the same as the larger posts with the class 'full'.

    My problem is these 'half' posts still have the shorter excerpt and I want to give them the same excerpt length as the 'full' posts when the screen is smaller than 767px.

    Any ideas?

    James

Reply

You must log in to post.

About this Topic