TWENTY SIXTEEN: CSS on how to Increase thumbnail size in widget

• 

  jmndotme · Member · Sep 9, 2016 at 11:26 am

  • Copy link
  • Add topic to favorites

  I have a sidebar widget — Top Posts + Pages. I have it set to show the thumbnail and post title.

  I would appreciate some code on how to increase the size of the thumbnail so that one can actually see it! Thanks! :)

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

• 

  siobhyb · Member · Sep 9, 2016 at 4:20 pm

  • Copy link

  Hi there. :)

  The following custom CSS will help you achieve what you’re after:

  .widgets-list-layout .widgets-list-layout-blavatar {
      max-width: 65px;
      width: 100%;
  }

  Increase/decrease the value of max-width to your liking.

  Let us know how you get on or if extra questions come up.

• 

  jmndotme · Member · Sep 15, 2016 at 8:44 am

  • Copy link

  Thanks again, siobhyb> the size looks good, having increased it to 67px, but the image is blurred. It was also blurred at 65px.

• 

  kathrynwp · Staff · Sep 23, 2016 at 2:03 pm

  • Copy link

  Unfortunately when increasing image size with CSS the image quality may be reduced. There isn’t a way around this that I’m aware of.

• 

  jmndotme · Member · Sep 25, 2016 at 12:11 pm

  • Copy link

  Thank you to you both. I have got around the blurring issue by changing the widget to an Image Grid layout. Looks fine and is a good size thumbnail. Cheers!

• 

  kathrynwp · Staff · Sep 26, 2016 at 2:09 pm

  • Copy link

  Glad you found a workaround, thanks for letting us know!