- This topic has 3 replies, 2 voices, and was last updated 1 year, 2 months ago by
.
Viewing 4 posts - 1 through 4 (of 4 total)
-
Posts
-
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
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.
Viewing 4 posts - 1 through 4 (of 4 total)
- You must be logged in to reply to this topic.