custom directory template not responsive

Paste your “custom grid template” code here to see. Also, where are you pasting it?
And, have you already tried making a test for theme conflict?

Hi,

Thanks for your help! This is the code I am using which comes directly from the members-grid.php UM template and im pasting it into

/wp-content/themes/theme-child/ultimate-member/templates

<?php /* Template: Members Grid Custom */ ?>

<div class="um-members">
			
	<div class="um-gutter-sizer"></div>
	
	<?php $i = 0; foreach( um_members('users_per_page') as $member) { $i++; um_fetch_user( $member ); ?>
			
	<div class="um-member um-role-<?php echo um_user('role'); ?> <?php echo um_user('account_status'); ?> <?php if ($cover_photos) { echo 'with-cover'; } ?>">
				
		<span class="um-member-status <?php echo um_user('account_status'); ?>"><?php echo um_user('account_status_name'); ?></span>
					
		<?php
		if ($cover_photos) {
			$sizes = um_get_option('cover_thumb_sizes');
			if ( $ultimatemember->mobile->isTablet() ) {
				$cover_size = $sizes[1];
			} else {
				$cover_size = $sizes[0];
			}
		?>

		<div class="um-member-cover" data-ratio="<?php echo um_get_option('profile_cover_ratio'); ?>">
			<div class="um-member-cover-e"><a href="<?php echo um_user_profile_url(); ?>" title="<?php echo esc_attr(um_user('display_name')); ?>"><?php echo um_user('cover_photo', $cover_size); ?></a></div>
		</div>

		<?php } ?>
		
		<?php if ($profile_photo) {
			$default_size = str_replace( 'px', '', um_get_option('profile_photosize') );
			$corner = um_get_option('profile_photocorner');
		?>
		<div class="um-member-photo radius-<?php echo $corner; ?>"><a href="<?php echo um_user_profile_url(); ?>" title="<?php echo esc_attr(um_user('display_name')); ?>"><?php echo get_avatar( um_user('ID'), $default_size ); ?></a></div>
		<?php } ?>
					
					<div class="um-member-card <?php if (!$profile_photo) { echo 'no-photo'; } ?>">
						
						<?php if ( $show_name ) { ?>
						<div class="um-member-name"><a href="<?php echo um_user_profile_url(); ?>" title="<?php echo esc_attr(um_user('display_name')); ?>"><?php echo um_user('display_name', 'html'); ?></a></div>
						<?php } ?>
						
						<?php do_action('um_members_just_after_name', um_user('ID'), $args); ?>
						
						<?php do_action('um_members_after_user_name', um_user('ID'), $args); ?>
						
						<?php
						if ( $show_tagline && is_array( $tagline_fields ) ) {
							foreach( $tagline_fields as $key ) {
								if ( $key && um_filtered_value( $key ) ) {
									$value = um_filtered_value( $key );

						?>
						
						<div class="um-member-tagline"><?php echo $value; ?></div>
						
						<?php
								}
							}
						}
						?>
						
						<?php if ( $show_userinfo ) { ?>
						
						<div class="um-member-meta-main">
						
							<?php if ( $userinfo_animate ) { ?>
							<div class="um-member-more"><a href="#"><i class="um-faicon-angle-down"></i></a></div>
							<?php } ?>
							
							<div class="um-member-meta <?php if ( !$userinfo_animate ) { echo 'no-animate'; } ?>">
							
								<?php foreach( $reveal_fields as $key ) {
										if ( $key && um_filtered_value( $key ) ) {
											$value = um_filtered_value( $key );
											
								?>
								
								<div class="um-member-metaline um-member-metaline-<?php echo $key; ?>"><span><strong><?php echo $ultimatemember->fields->get_label( $key ); ?>:</strong> <?php echo $value; ?></span></div>
								
								<?php 
									}
								} 
								?>
								
								<?php if ( $show_social ) { ?>
								<div class="um-member-connect">
								
									<?php $ultimatemember->fields->show_social_urls(); ?>

								</div>
								<?php } ?>
								
							</div>

							<div class="um-member-less"><a href="#"><i class="um-faicon-angle-up"></i></a></div>
						
						</div>
						
						<?php } ?>
						
					</div>
					
	</div>
				
	<?php 
	um_reset_user_clean();
	} // end foreach

	um_reset_user();
	?>

	<div class="um-clear"></div>

</div>

Yes, you would have to add new php/css/js to display everything as you want it.

Just so you know, it is supposed to be 3 per row not 2 so pasting the code back in your child-theme didn’t change anything but broke the code. If your mind is set in having 2 per row change the pagination in edit member directory. FWIW.

• This reply was modified 8 years, 1 month ago by borisv.

Thanks for your replies!

I believe what you say about it being 3 per row is true – but only if the size of the page allows like in a full screen template. My member directory is currently contained in a column of around 600px in width and when not using the custom template, each profile card is the same width as the profile cards in the ultimate member demo directory. It is also responsive to window size changes so making the window small results in just one per row etc.

However, when using the custom template, the profile cards are a lot smaller in width than what is the default, and the layout is no longer responsive so changing the screen size doesnt change the number per row – its always 3.

You mentioned changing the pagination in edit member directory – but I do not see this option when editing the member directory? so I presume I have misunderstood.

So because the default values aren’t being adhered to im sure there is either a bug somewhere as I have followed the customising rules exactly, or a step is missing somewhere.

I have also tried using a different theme (wordpress 2016) with the same results so can rule out it being a theme conflict.

Something isn’t quite linking correctly to the css or the js. Perhaps I could force the width of the profile card?

Thanks!

Creating the custom template in the original ultimate-member plugin directory (not overriding in the custom theme) produces the same issue.

Dont know if this helps, but the search menu won’t show even when selected in the Edit Directory page.

You mentioned changing the pagination in edit member directory – but I do not see this option when editing the member directory?

Go to Admin panel> UM > Member Directories > Member (your directory) > Edit.
Find Results & Pagination:
Number of profiles per page: 2
Maximum number of profiles: (leave blank to show all users in the directory)
Yes, this means that there will be lots of page index numbers.