Courses shortcode

@kellerpt,

The courses shortcode obeys the catalog settings for the number of columns sitewide. EG: if you show 3 columns on your catalog you show 3 columns when using the shortcode.

You can change the number of columns displayed for all loops using this filter: https://lifterlms.com/docs/can-change-number-columns-displayed-course-membership-catalog/

You’ll see this second example customizes the number of columns for courses and memberships as different numbers. If you get smart you can customize the number of columns using a shortcode by adding a condition using a page id where the shortcode has been added:

function my_llms_loop_cols( $cols ) {
  if ( is_page( 123 ) ) {
     return 4;
  }
  return $cols;
}
add_filter( 'lifterlms_loop_columns', 'my_llms_loop_cols' );

In that example the page ID of the page where your shortcode is is “123”

Hope that helps.

Where are you adding your filter? Try adding a higher priority:

add_filter( 'lifterlms_loop_columns', 'my_llms_loop_cols', 99999 );

And another question, how to make the minimum width for mobile devices was 900px

This is highly dependent on your theme and I will not be able to guess at some custom CSS to make this possible. You should reach out to your theme developers for the best way to do this on your theme.

If you provide a link I’ll see if I can help but I can’t promise I’ll be the best at helping with that kind of thing.

Best,

@kellerpt,

I misunderstood the question.

CSS isn’t filterable like PHP is but you can very easily copy the CSS you’ve highlighted and change the default “600px” to your preferred “900px”

Add that to your site via the customizer: https://lifterlms.com/docs/add-custom-css-using-wordpress-customizer/

.llms-loop-list.cols-4 .llms-loop-item {
 width: 100%;
} 
@media (min-width: 900px) {
   .llms-loop-list.cols-4 .llms-loop-item {
     width: 25%;
   } 
}

Hope that helps,

• This reply was modified 8 years, 7 months ago by Thomas Patrick Levy. Reason: added CSS example

@kellerpt,

In settings in my template is set up correctly http://prntscr.com/h5by64, but the setting has no effect on the shortcode with the course.

Right, I know! I misunderstood the original request. Use that custom CSS and ignore my previous statement. It came from a place of misunderstanding!