Large black border on top and bottom of featured image in mobile brower

  • Resolved mycolorfuladventures

    (@mycolorfuladventures)


    8 years, 7 months ago

    When I open a post in a mobile browser (iphone and ipad), there is a large black border on the top and bottom of the featured image. This doesn’t happen on my laptop. I can’t figure out what to add to the custom CSS to get rid of this border on mobile browsers. I have Jetpack but I have the mobile site option deactivated. I had added some padding to the top and bottom of my images to keep a space between my images and paragraphs. Do you think this is causing it? It doesn’t add any black borders to the bottoms of any of my other images or the to the featured images when I view my site on my laptop.

    This is the custom CSS that I added for padding:

    img {
	padding-top: 20px;
	padding-right: 0;
	padding-left: 0;
	padding-bottom: 20px;
}

Viewing 5 replies - 1 through 5 (of 5 total)
  • Thread Starter mycolorfuladventures

    (@mycolorfuladventures)

    Also, this is my site: https://www.mycolorfuladventures.com

    Thread Starter mycolorfuladventures

    (@mycolorfuladventures)

    Okay, so when I changed the padding to zero the big black border on the top and bottom of my mobile featured images went away. It still never showed up anywhere else.

    Is there a way to make the black go away? Or is there a way to only have the images within my posts have the padding and not the featured images? Adding the padding CSS has been the only way I can consistently have a space between my images and my paragraphs.

    Hi there,

    One option is to add more specificity to your custom CSS so that it’s only targeting images that appears in the main content of a post/page. You could do that with .entry-content img:

    .entry-content img {
    padding: 20px 0;
}

    Try adding the above to Jetpack’s CSS editor and let me know how you get on. ??

    Thread Starter mycolorfuladventures

    (@mycolorfuladventures)

    Yay it works! Thank you so much!

    You’re most welcome! Feel free to start another thread if any extra questions come up, too.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Large black border on top and bottom of featured image in mobile brower’ is closed to new replies.