Image Overlay Issue

  • Resolved jbrunetti

    (@jbrunetti)


    2 years, 7 months ago

    Images that I add to my posts via the Jetpack Image block have the overlay cut off. They look fine ‘locally’ in WordPress but once posted to the web the gradient seems to truncate about 20px shy of the bottom. Please see images on the example page right before the map embed.

    If I inspect element in the post itself I see image-overlay and image-overlay-line id/class (respectively) that I don’t see once the post is published. I have turned off lazy loading and site accelerator options to see if something like that is causing a conflict, but no luck. Can anyone help?

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Support lastsplash (a11n)

    (@lastsplash)

    Hi @jbrunetti –

    This is happening because of CSS included in your WordPress theme, Inspiro. It is setting a 20px bottom margin on images with the lines:

    .entry-content .wp-block-image img,
.entry-content img.alignnone,
.entry-content img.aligncenter,
.entry-content img.alignleft,
.entry-content img.alignright,
.entry-content img.attachment-fullsize {
  margin-bottom: 20px;
  max-width: 100%;
  height: auto; }

    You will either need to write CSS to change this behavior or reach out to the theme developers to have it fixed. Alternatively, you could consider switching themes.

    We’re unable to provide support for visual customizations via CSS.

    I hope that helps point you in the right direction.

    Thread Starter jbrunetti

    (@jbrunetti)

    Awesome thanks for pointing me in the right direction. Sometimes the simplest solution REALLY is the right one, but hard to troubleshoot since so much overlapping css from the theme, widgets, plugins, etc. I added a margin-bottom of 0px for that class and all is well. Thank you!

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Image Overlay Issue’ is closed to new replies.