Canard not showing avatar in author bio on mobile and tablet formats

• 

  truenorthnomad · Member · Dec 11, 2017 at 10:19 pm

  • Copy link
  • Add topic to favorites

  The Canard theme allows you to show the author bio on single posts. The avatar of the author also shows but only in desktop format. Is there a way for the avatar to show on the other devices as well?

  The blog I need help with is: (visible only to logged in users)

• 

  sfmerv · Member · Dec 11, 2017 at 11:04 pm

  • Copy link

  If you are allowed to add css to your site then try this

  @media screen and (min-width: 960px)
  .author-info .author-avatar {
      display: block;
  }

  If that doesn’t work then try

  @media screen and (min-width: 960px)
  .author-info .author-avatar {
      display: block !important;
  }

• 

  truenorthnomad · Member · Dec 21, 2017 at 4:01 am

  • Copy link

  thanks! I’ll give it a go.

• 

  truenorthnomad · Member · Dec 22, 2017 at 1:08 pm

  • Copy link

  I tried both but they didn’t appear to have worked. Other than adding this and publishing was their another step I may have missed? Thanks again for your help.

• 

  icookwp · Member · Dec 22, 2017 at 4:29 pm

  • Copy link

  I just reviewed Canard theme css file and you need to simply add below css without any media queries to make the avatar appear on all devices.

  .author-info .author-avatar {
  display: block !important;
  }

  Also a note for @dtlevin . His code is missing {}. Below is the correct format to write a media query : )

  @media screen and (min-width: 960px) { …… }

• 

  icookwp · Member · Dec 22, 2017 at 4:30 pm

  • Copy link

  I just reviewed Canard theme css file and you need to simply add below css without any media queries to make the avatar appear on all devices.

  .author-info .author-avatar {
  display: block !important;
  }

  Also a note for @dtlevin . His code is missing {…}. Below is the correct format to write a media query : )

  @media screen and (min-width: 960px) { …… }

• 

  icookwp · Member · Dec 22, 2017 at 5:17 pm

  • Copy link

  oops!

  Sorry for the duplicate reply guys.

• 

  kathrynwp · Staff · Dec 27, 2017 at 4:23 pm

  • Copy link

  truenorthnomad – are you all set?

  The CSS icookwp suggested works for me, but you don’t actually need the !important, which should be avoided wherever possible.

  .author-info .author-avatar {
    display: block;
  }

  icookwp & dtlevin – thanks for pitching in to help!