We're merging with GenerateBlocks! Learn more here.

[Resolved] Card Category Styling

Please login to receive premium support.

Support for the free plugin can be found here.

Home Forums Pro Support Card Category Styling

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #36204
    Alirio
    Participant

    Hi Everyone.

    I have added this snippet to move the category meta above the title on cards:

    add_action('wpsp_before_header', function($settings){
    if( 6317 == (int)$settings['list_id']){ //apply to specified WPSP ID
    	printf( '<span class="wp-show-posts-terms wp-show-posts-meta">%1$s</span>',
    				get_the_term_list( get_the_ID(), 'category', '', apply_filters( 'wpsp_term_separator', ', ' ) )
    			);
    }
    },10,1);

    To style the category, I have added this CSS:

    .wp-show-posts-meta {
    	text-transform: uppercase;
    	font-size: 14px;
    	letter-spacing: 1px;
    	font-weight: bold;
    	}
    

    However, this styling doesn’t apply to mobile screen size. It works for desktop and tablet. What do I need to make this styling apply to mobile size?

    Also, neither padding-bottom nor margin-bottom work to put some extra space between the category and the title. How do I do that? I’d also like to move the category closer to the picture above kind of centered between the picture and title.

    Thank you.

    Rio

    #36235
    elvin
    Moderator

    Hi Rio,

    You need to wrap it in @media rule so it applies.

    Example:

    @media (max-width: 767px){
    .wp-show-posts-meta {
    	text-transform: uppercase;
    	font-size: 14px;
    	letter-spacing: 1px;
    	font-weight: bold;
    	}
    }

    You may also have to be more specific with the selector as well like this:

    @media (max-width: 767px){
    section#wpsp-6317 .wp-show-posts-meta {
    	text-transform: uppercase;
    	font-size: 14px;
    	letter-spacing: 1px;
    	font-weight: bold;
    	}
    }

    You can use the latter if the former doesn’t apply.

    #36331
    Alirio
    Participant

    Thank you. The problem was a missing closing bracket somewhere else on the Additional CSS.

    #36333
    elvin
    Moderator

    No problem. Glad you got it sorted. 😀

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.