WordPress.org

Support

Support » Themes and Templates » Changing the excerpt length when using a media query

Changing the excerpt length when using a media query

  • 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

  • The topic ‘Changing the excerpt length when using a media query’ is closed to new replies.