Site logo

Archived topic

Help With Page Hero CLS Shift

4 replies · Started by Eric on December 13, 2021

Viewing posts 1–5 of 5

Hello,

I have a Page Hero element on some categories and tags similar to what you see in this link.
https://dividendearner.com/stock/tse-t/

The content of the page hero is a shortcode to convertbox and obviously there is a js scripted called.

The space shifts and is flagged by Google and I am curious if I can reserve the space and how?

Thanks for your help!

I managed to use this with success.

Now I need to fix mobile. I thought I could show / hide the element based on the device but I can't see where to do that?

Thanks.

Hi Eric,

Can you link us to the page you're working on?

So we can inspect the page and point w/ element you can set height w/ CSS to reserve the space for the elements to load on. (if you still need help with it)

Now I need to fix mobile. I thought I could show / hide the element based on the device but I can’t see where to do that?

Showing and/or hiding based on device can be done loosely on CSS @media rules.

Example: (for mobile)

@media (max-width:768px){
.the-selector-element-of-your-shortcode{
display: none;
}
}

You can also do it with PHP snippet conditions.

We can wrap your shortcode on another shortcode to serve as an helper function to set this condition.

Example:


add_shortcode('condition_wrapped_shortcode', function(){
    if( wp_is_mobile() || check_if_mobile() ){
        do_shortcode('[your_shortcode_here]');
    }
});	
    
public function check_if_mobile() {
    if ( isset( $_SERVER['HTTP_USER_AGENT'] ) ) {
    // detect the device for Whatsapp share API
        $iphone = strpos( $_SERVER['HTTP_USER_AGENT'], "iPhone" );
        $android = strpos( $_SERVER['HTTP_USER_AGENT'], "Android" );
        $palmpre = strpos( $_SERVER['HTTP_USER_AGENT'], "webOS" );
        $berry = strpos( $_SERVER['HTTP_USER_AGENT'], "BlackBerry" );
        $ipod = strpos( $_SERVER['HTTP_USER_AGENT'], "iPod" );
        // check if it's a mobile
        if ( $iphone || $android || $palmpre || $ipod || $berry == true ) {
            return true;
        }
    }
    
    return false;
    
}

And then use [condition_wrapped_shortcode] to display the shortcode w/ condition. (execute on mobile, do nothing on desktop).

You can modify the if statement to do the opposite. (do nothing on mobile, execute on desktop)

I ended up solving it ...
the div code was removed from my comment but since I use convert box I am able to target the device so I was good.

Thanks for taking the time to help out as usual :)

Happy holidays.

Thanks for letting us know.

Happy holidays! Stay safe! :D

This archived topic is closed to new replies.