Author shortcode not showing (gr)avatar on mobile

[skyhawkmedia]

Hi guys,

Using the pro theme.
I’ve recently implemented the “add the author to the bottom of posts using the author shortcode” hack into my child theme functions.php. This all works great and no issue…on the desktop. But when I view on mobile, the author info is there but the avatar is not. Is there a setting or something that I’m missing?

Thanks
Steve

[tristup]

Hi @skyhawkmedia

The (gr)avatar is visible only above the 480px screen size,
that is reasons why it is not coming up in mobile.
By adding the below code you can make that visible in mobile devices.
To modify it further you can check this resource to learn more.

@media  (max-width: 480px) {
  .x-author-box .avatar {    
    display: block;
  }
}

Please note that the code provided serve only as a guide to help you get started custom coding on your own if there’s no option offered in our theme or the products we bundle. We do not provide support for custom codes that means we can’t fix it in case it conflicts with something in your site nor will we enhance it.

Hope it helps

Thanks

[skyhawkmedia]

Thanks for this, works a treat!

Just as an additional question, why does this affect my iPhone 6S plus (1920x1080 res)? It suggests that the browser is using the 480px break point irrespective of the actual resolution of the screen.

Thanks
S.

[rad]

Hi @skyhawkmedia,

That’s a different resolution, please note that mobile devices also have PPI (pixel per inch) ratio that also increases resolution, but it doesn’t mean an app/browser will recognize it as is. The mobile site usually has this

<meta name="viewport" content="width=device-width, initial-scale=1.0">

It tells the browser which size should be followed, and it’s the device’s width and not the resolution. If it’s going to follow 1920x1080then it’s considered desktop, it’s as big as my desktop screen.

Thanks!