Custom Search doesn’t line up

Hi,

On the page I have a custom search on that page. In my child-theme I have modified the search.php and functions.php

Problem 1 is when I’m searching for let’s say, ‘ame’ (to find amethists), the ‘Flower Amethist’ is not shown correctly. It looks like the next search result is shown in the <Div> of the Flower Amethist.. (even when I’m searching on ‘Flower’)??

Problem 2: There are numbers in the first line of the excerpt..Those need to be gone!

These are the pieces of code:

SEARCH.PHP

<?php
/**
 * The template for displaying search results pages.
 *
 * @package WordPress
 * @subpackage Shop Isle
 */

get_header(); ?>

	<!-- Wrapper start -->
	<div class="main">
		<!-- Post single start -->
			<?php
			$shop_isle_header_image = get_header_image();
			if ( ! empty( $shop_isle_header_image ) ) :
				echo '<section class="page-header-module module bg-dark" data-background="' . esc_url( $shop_isle_header_image ) . '">';
				else :
					echo '<section class="page-header-module module bg-dark">';
				endif;
			?>
			
					<div class="container">
						<div class="row">
							<div class="col-sm-6 col-sm-offset-3">
								<h1 class="module-title font-alt"><?php printf(
									/* translators: s: Search term. */
								        __( 'Zoekresultaten voor: %s', 'shop-isle' ),
									'<span>' . get_search_query() . '</span>'
								); ?></h1>
							</div>
						</div>
					</div><!-- .container -->
			
			
			<?php
				echo '</section>';

				echo '<section class="module">';
			?>
			<div class="container">

				<div class="row">

					<!-- Content column start -->
					<div class="col-sm-8">

					<div style="float: left; margin-right: 35px; overflow: hidden;"><img src="https://www.tiantu-mineralen.be/wp-content/uploads/2017/06/search.png" width="64px"/></div><div style="overflow:auto; margin-bottom:80px;"><form id="searchform" role="search" action="https://www.tiantu-mineralen.be/" method="get">
<div>
<h3 id="portfolio-all" style="overflow: hidden; margin-top: 0px!important;">Zoek in Mineralen Gids</h3>
<span class="mingids_zoektxt">Je kunt hier alle informatie over de eigenschappen van mineralen en edelstenen vinden, of zoek op naam, klacht, chakra, sterrenbeeld, etc.</span>

</div>

<div>

<input id="s" name="s" type="text" value="" />
<input name="post_type" type="hidden" value="portfolio_page" />
<input id="searchsubmit" class="widget" style="margin-top: 15px;" type="submit" value="Zoeken" />

</div>
</form></div>
					
					
		<?php if ( have_posts() ) { ?>

            

            <?php while ( have_posts() ) { the_post(); ?>

               <div class="thumbsearch"><?php  the_post_thumbnail('small') ?></div>
                 <div class="searchinfo"><h3><a href="<?php echo get_permalink(); ?>">
                   <?php search_title_highlight(); ?>
                 </a></h3>
                 
                 <?php the_excerpt(); ?>
                 <div class="h-readmore"> <a href="<?php the_permalink(); ?>">Read More</a></div>
             </div>

            <?php } ?>

<?php
global $wp_query;

$big = 999999999; // need an unlikely integer

echo paginate_links( array(
	'base' => str_replace( $big, '%#%', esc_url( get_pagenum_link( $big ) ) ),
	'format' => '?paged=%#%',
	'current' => max( 1, get_query_var('paged') ),
	'total' => $wp_query->max_num_pages
) );
?>
  

        <?php } ?>

					</div><!-- Content column end -->	
					
					<!-- Sidebar column start -->
					<div class="col-sm-4 col-md-3 col-md-offset-1 sidebar">

					

					</div>
					<!-- Sidebar column end -->
					
				</div><!-- .row -->

			</div>
		</section>
		<!-- Post single end -->

<?php get_footer(); ?>

FUNCTIONS.PHP

<?php 

// Image size for single posts
add_image_size( 'single-post-thumbnail', 590, 180 );

//2012 oct alchymyth @ transformationpowertools.com
//shortcode to insert post_thumbnail into content
//usage [thumbnail size=medium align=left]

add_shortcode('thumbnail','insert_post_thumbnail_into_content');

function  insert_post_thumbnail_into_content( $atts ) {
   extract( shortcode_atts( array(
      'size' => 'post-thumbnail', // any of the possible post thumbnail sizes - defaults to 'thumbnail'
      'align' => 'none' // any of the alignments 'left', 'right', 'center', 'none' - defaults to 'none'
      ), $atts ) );
	global $post;
	
	if( ! get_post_thumbnail_id( $post->ID ) ) return false; //no thumbnail found
	
//alignment check
	if( !in_array( $align, array( 'left', 'right', 'center', 'none' ) ) ) $align = 'none';
	$align = 'align' . $align; 
	
//thumbnail size check
	if( !(preg_match( '|array\((([ 0-9])+,([ 0-9])+)\)|', $size ) === 1) && !in_array( $size, get_intermediate_image_sizes() ) ) $size = 'post-thumbnail';
	if( preg_match( '|array\((([ 0-9])+,([ 0-9])+)\)|', $size, $match ) === 1 ) $sizewh = explode( ',', $match[1] ); $size = array( trim( $sizewh[0] ), trim( $sizewh[1] ) );
	
//get the post thumbnail
	$thumbnail = get_the_post_thumbnail( $post->ID, $size );

//integrate the alignment class
	$thumbnail = str_replace( 'class="', 'class="' . $align . ' ', $thumbnail ); //add alignment class

return $thumbnail;
}

add_filter( 'rwmb_meta_boxes', 'prefix_register_meta_boxes' );

function prefix_register_meta_boxes( $meta_boxes )
{
    $prefix = 'rw_';

    $meta_boxes[] = array(
        'title'    => 'Media',
        'pages'    => array( 'bestilling'),
        'fields' => array(
            array(
                'name' => 'URL',
                'id'   => $prefix . 'url',
                'type' => 'file_advanced',
            ),
        )
    );

    return $meta_boxes;
}

function featured_image($post) {
    if (has_post_thumbnail($post->id))
        the_post_thumbnail('large');
}

add_shortcode('featured_image', 'featured_image');

function search_excerpt_highlight( $limit ) {
	$excerpt = get_the_excerpt();
	$excerpt = explode(' ', get_the_excerpt(), $limit);

	if ( count( $excerpt ) >= $limit ) {
		array_pop( $excerpt );
		$excerpt = implode(' ', $excerpt);
	} else {
		$excerpt = implode(' ', $excerpt);
	}

	$excerpt = apply_filters( 'get_the_excerpt', $excerpt );

	$allowed_tags = '<p>,<br>,<mark>';
	$excerpt = strip_tags( $excerpt, $allowed_tags );

	$excerpt = preg_replace('<code>\[[^\]]*\]</code>', '', $excerpt);

	$keys = implode('|', explode(' ', get_search_query()));
	$excerpt = trim(preg_replace('/(' . $keys .')/iu', '<mark class="search-highlight">\0</mark>', $excerpt));

	echo '<p>' . $excerpt . ' ...</p>';
}

function search_title_highlight() {
    $title = get_the_title();
    $keys = implode('|', explode(' ', get_search_query()));
    $title = preg_replace('/(' . $keys .')/iu', '<strong class="search-highlight">\0</strong>', $title);

    echo $title;
}

add_filter('jpeg_quality', function($arg){return 100;});

?>

Is there anyone who can help me with this? In first place he would highlight the search term in the excerpt too, but I needed to modify the code in search.php to get it like this again..

Heeeelp!

The page I need help with: [log in to see the link]