Archived topic
Help With Page Hero CLS Shift
4 replies · Started by Eric on December 13, 2021
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