Image Padding on Widgets

  • Resolved heinjonker

    (@heinjonker)


    8 years, 6 months ago

    I’ve tried a few code variations to edit padding on images, but I can’t seem to target Widget Images specifically. One this site, https://www.gaucheair.com, I’ve added an Image Widget on the Sidebar and a few images on the Footer but I’d like to tighten the Padding around the images. Any suggestions, please?

Viewing 3 replies - 1 through 3 (of 3 total)

  • I don’t see a child theme, so hopefully you are using Jetpack’s Custom CSS option and not making any changes to the theme files. Otherwise your changes will be lost the next time you update the theme.

    For the sidebar images, try adding these three CSS rules:

    
.sidebar-primary .widget_image {
  padding: 0;
}
.sidebar-primary .widget_image .jetpack-image-container {
  line-height: 0
}
.sidebar-primary .widget_image img {
  margin: 0;
}

    Not sure what you want to do with the footer images.

    Thread Starter heinjonker

    (@heinjonker)

    Brilliant, that worked for the Sidebar Widget Images. What I want to achieve with the footer Widget is adjust the padding around the images, or just adjust the height of the widget area. I’ve tried but I’m sure I’m missing something:
    .footer-widgets {
    padding: 10px 0;
    }

    Theme Author Ben Sibley

    (@bensibley)

    This CSS should do the trick:

    .site-footer .sidebar-footer img {
  margin: 0;
}
Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Image Padding on Widgets’ is closed to new replies.