css - Template can be swipe outside Mobile viewport after Functions.php shortcode - WooCommerce

I am having a strange issue where I use a custom functions.php shortcode to display Recently Viewed Products on single product page.

However once I add it I am able to swipe outside the website and see white space around.

I reverted back to default theme and the issue is still there.

The code is:

/// Recently Viewed Products ///
add_shortcode( 'recently_viewed_products', 'bbloomer_recently_viewed_shortcode' );
 
function bbloomer_recently_viewed_shortcode() {
 
   $viewed_products = ! empty( $_COOKIE['woocommerce_recently_viewed'] ) ? (array) explode( '|', wp_unslash( $_COOKIE['woocommerce_recently_viewed'] ) ) : array();
   $viewed_products = array_slice($viewed_products, 0, 6);

 
   if ( empty( $viewed_products ) ) return;
    
   $title = '<h5 class="product-section-title container-width product-section-title-related pt-half pb-half uppercase">RECENTLY VIEWED</h5>';
   $product_ids = implode( ",", $viewed_products );
 
   return $title . do_shortcode("[products ids='$product_ids']");
   
}

// adds notice at single product page above add to cart
add_action( 'woocommerce_after_single_product', 'recviproducts', 31 );
function recviproducts() {
    echo do_shortcode ('[recently_viewed_products]');
}

function custom_track_product_view() {
    if ( ! is_singular( 'product' ) ) {
        return;
    }

    global $post;

    if ( empty( $_COOKIE['woocommerce_recently_viewed'] ) )
        $viewed_products = array_slice($viewed_products, 0, 6);
    else
        $viewed_products = (array) explode( '|', $_COOKIE['woocommerce_recently_viewed'] );

    if ( ! in_array( $post->ID, $viewed_products ) ) {
        $viewed_products[] = $post->ID;
    }

    if ( sizeof( $viewed_products ) > 6 ) {
        array_shift( $viewed_products );
    }

    // Store for session only
    wc_setcookie( 'woocommerce_recently_viewed', implode( '|', $viewed_products ) );
}

add_action( 'template_redirect', 'custom_track_product_view', 20 );
Copy code

Maybe it should be limited via CSS I believe?

I will appreciate any help or advise possible.

Thank you so much!

Didn't find the answer?

Our community is visited by hundreds of web development professionals every day. Ask your question and get a quick answer for free.