Customizing a link to random post in navigation

[eecwp]

I’m working on adding an icon link to a random post (custom post type). Initially I was hoping to add it to the navigation in the breadcrumbs bar at the top, but I’m also willing to put it at the bottom of the post.

It’s looking alright here: https://prnt.sc/l3mqmd

BUT, the alignment is all wonky when resized to smaller screens: https://prnt.sc/l3mrn7

How can I get these all in the same row so they behave well when responsive?

Even better, can I put that “random” icon in the breadcrumbs navigation bar up top?

Thanks for any tips anyone might be able to provide. I’m a CSS newbie, but having a good time breaking things.

Here’s the functions.php code that I used:

add_action( 'x_after_view_integrity_content', 'x_print_post_nav' ); 
function x_print_post_nav(){
echo '<div class="post-navigation people-nav x-breadcrumb-wrap"><a href="http://www.eastendcemeteryrva.com/?redirect_to=random&post_type=person"><i class="x-icon x-icon-random" data-x-icon-s="" aria-hidden="true"></i></a>';
x_entry_navigation();
echo '</div>';
}

Here’s the custom CSS I’ve come up with so far:

.post-navigation.people-nav {
float: right;
width: 100%;
text-align: right;
padding-right: .5rem;

}

.x-nav-articles {
float: right;
width: 4%;
text-align: right;

The url to an example page is https://eastendcemeteryrva.com/person/king-p-cousins/
The password to view is eecwp

Thanks!

[eecwp]

Figured this one out myself, to add the random post link in the breadcrumbs bar. Here’s what I added to functions.php in case it helps anyone else:

function x_entry_navigation() {

$stack = x_get_stack();

  if ( $stack == 'ethos' ) {
    $left_icon  = '<i class="x-icon-chevron-left" data-x-icon-s="&#xf053;"></i>';
    $right_icon = '<i class="x-icon-chevron-right" data-x-icon-s="&#xf054;"></i>';
    $rand_icon = '<i class="x-icon x-icon-random" data-x-icon-s="" aria-hidden="true"></i>';
  } else {
    $left_icon  = '<i class="x-icon-arrow-left" data-x-icon-s="&#xf060;"></i>';
    $right_icon = '<i class="x-icon-arrow-right" data-x-icon-s="&#xf061;"></i>';
    $rand_icon = '<i class="x-icon x-icon-random" data-x-icon-s="" aria-hidden="true"></i>';
  }

  $is_ltr    = ! is_rtl();
  $prev_post = get_adjacent_post( false, '', false );
  $next_post = get_adjacent_post( false, '', true );
  $prev_icon = ( $is_ltr ) ? $left_icon : $right_icon;
  $next_icon = ( $is_ltr ) ? $right_icon : $left_icon;

  ?>

  <div class="x-nav-articles">
    <a href="http://www.eastendcemeteryrva.com/?redirect_to=random&amp;post_type=person" class="rand">
    <?php echo $rand_icon; ?>
  </a>

<?php if ( $prev_post ) : ?>
  <a href="<?php echo get_permalink( $prev_post ); ?>" title="<?php __( 'Previous Post', '__x__' ); ?>" class="prev">
    <?php echo $prev_icon; ?>
  </a>
<?php endif; ?>

<?php if ( $next_post ) : ?>
  <a href="<?php echo get_permalink( $next_post ); ?>" title="<?php __( 'Next Post', '__x__' ); ?>" class="next">
    <?php echo $next_icon; ?>
  </a>
<?php endif; ?>
  </div>
  <?php

  }

I used the Redirect URL to Post plugin for the random post redirect. https://chattymango.com/redirect-url-to-post/.