Twenty Seventeen Featured Images & Margins

• 

  frankdlps · Member · Dec 27, 2022 at 5:14 am

  • Copy link
  • Add topic to favorites

  On a site I am working on (not http://frankdlps..wordpress.com) I have added featured windows to the 4 pages on the homepage.

  The images are wide and narrow banners. They display fine with the following CSS:

  /* Panel Image */
  .panel-image {
  height: 20vh;
  background-repeat: no-repeat;
  -webkit-background-size: 150px;
  background-size: 100%;
  }

  However, there is a large margin/whitespace area below each image, which must be scrolled though.

  I have tried a number of CSS options, however I cannot reduce the whitespace below the image, or the scroll to be within the image only i.e. not over the space also

  Is it possible to remove the margin using CSS?

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

• 

  frankdlps · Member · Dec 27, 2022 at 5:59 am

  • Copy link

  Okay, in the meantime I have simply removed the gradient with:

  /* Remove gradient on image */
  .panel-image:before {
  background: none;
  }

  This still leaves a large are of space, although I suspect it is not possible to reduce this.

• 

  staff-mckluskey · Staff · Dec 28, 2022 at 10:47 am

  • Copy link

  Hi there!

  Could you please share the URL of the site you’re working on? Our CSS support is rather limited, but we’ll take a look and advise.