Remove the Gray / Grey border around the header image?

• 

  hookaudio · Member · Mar 28, 2017 at 6:56 am

  • Copy link
  • Add topic to favorites

  Home

  We are using the Argent theme. We tweaked the CSS so the header image would fit better on different devices (mobile, tablet, desktop) but now we are trying to remove the gray border/padding around the header image?

  here is the custom CSS that has been added…

  @media screen and (min-width: 768px) {
  .site-branding {
  padding: 7.75em 0;
  background-size: contain;
  }
  }

  @media screen and (max-width: 768px) {
  .container {
  max-width: 100%;
  }

  .content {
  width: 100%;
  }

  .sidebar {
  width: 100%;
  }

  .site-branding {
  background-size: contain;
  padding: 3.55em 0 !important;
  }
  }
  }
  .single-jetpack-portfolio .entry-header {
  margin-bottom: 0em;
  }
  .site-main {
  margin-top: 2em;
  }

  (yes, also I know we also tweaked headers…jetpack)

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

• 

  otpidusprime · Member · Mar 28, 2017 at 9:43 am

  • Copy link

  Hi there,
  The Gray padding is begin added because the image is fluidly contained inside the div because of “background-size: contain;” property added to “.site-branding”.
  To solve this, one thing you can do is edit this code:

  .site-branding {
    padding: 7.75em 0;
    background-size: contain;
  }

  to this

  .site-branding {
    padding: 7.75em 0;
    background-size: cover;
    background-position: center center;
  }

  this will fill up the header image inside the div in all resolutions and windows sizes, the only thing is the text on the left gets cut due to this-to solve it you can change the “background-position” property to have the value “left center” like this:

  .site-branding {
    padding: 7.75em 0;
    background-size: cover;
    background-position: left center;
  }

  or if you can just edit the text to be on center of the image.

  Hope this helps :)