Grey background behind images with captions

• 

  truthseekerblogger2015 · Member · Sep 29, 2017 at 6:00 pm

  • Copy link
  • Add topic to favorites

  Hi,

  I have another question. How do I get rid of the grey background behind images that have a caption? For example:

  https://asweetdoseofreality.com/2017/09/22/mary-poppins-revolutionary-feminist-occultist/

  I’m not digging the grey background or border around the images.

  I tried:

  .wp-caption-text {
  background: none;
  }

  That didn’t work.

  Also how do I force the caption text to stay within the width of the image?

  Thanks again.

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

• 

  truthseekerblogger2015 · Member · Sep 29, 2017 at 6:04 pm

  • Copy link

  Oh wait. I was messing around and this worked.

  .wp-caption {
  background: none;
  }

  How do I force the caption text to stay within the width of the image?

  Thanks.

• 

  thesacredpath · Member · Sep 29, 2017 at 9:35 pm

  • Copy link

  Hi, the images I’m seeing in that post are on another site and not directly uploaded to the media library on your site. When that is done, the software has far less control of the images, and they can end up displaying narrower than the available content area, which is what is happening with the wider images, so the image actually displays narrower than the image/caption container. There really isn’t a way to make the caption stay with the narrower image width.

  You can give this a try, which will widen the images out to the full width of the content area, or the actual width of the content area, but in some cases this is going to result in some loss of clarity on the images.

  .wp-caption img {
    width: 100%;
  }

• 

  truthseekerblogger2015 · Member · Sep 30, 2017 at 12:18 am

  • Copy link

  Hi,

  I got ya. I worked around it by putting some of the captions between [caption width="whatever"] tags and specifying the same width as the images as opposed to <p class=”wp-caption-text”>.

  I do have another question. How do I eliminate the grey border that pops up around featured images when I hover over them? I think I’ve driven the Opti theme developer nuts asking him questions via email. lol.

  I notice if I put an image in the body of a post but don’t use a featured image the theme makes the image in the body the featured image anyway and displays it on the main page next to the article heading. So what winds up happening is the image in the post will display a grey border if you hover over it, even though it’s not a linked image.

  Here’s a good example.

  https://asweetdoseofreality.com/2017/09/29/trumps-health-secretary-tom-price-resigns/

  Thanks.

• 

  thesacredpath · Member · Oct 2, 2017 at 10:46 pm

  • Copy link

  Hi, this will get rid of the box shadow that appears on hover on featured images.

  .entry img, .entry img:hover {
    box-shadow: none;
  }