photo link label missing

• 

  bluelinebreakroom · Member · Apr 7, 2017 at 10:45 pm

  • Copy link
  • Add topic to favorites

  https://bluelinebreakroom.com/2017/04/07/health-benefits-of-coffee/

  At the bottom of this blog, I added 6 photo links. (I used the same HTML and CSS that I have used on other pages but changed the post id.)

  All the photo labels have shifted left and the top left one is missing. I cant determine why. here is the CSS.

  /*blog coffee health*/
  
  @media screen and (min-width: 960px) {
  .postid-1432 #content {
  margin-left: auto;
  margin-right: auto;
  float: none;
  padding-left: 3% !important;
  padding-right: 2% !important;
  }
  }

  @media screen and (min-width: 960px) {
  .postid-1432 .grid-link-wrapper {
  width: 30%;
  float: center;
  margin-bottom: 30px;
  }

  .postid-1432 .grid-link-wrapper:nth-of-type( 3n + 2) {
  margin-left: 2%;
  margin-right: 0%;
  }

  .postid-1432 .grid-link-wrapper {
  display: inline-block;
  overflow: hidden;
  background: #333;
  margin-bottom: 8px;
  position: relative;
  }

  .postid-1432 .grid-link-wrapper a:hover img {
  opacity: .15;
  transform: scale(1.2,1.2);
  transition: 500ms;
  }

  .postid-1432 #content .grid-link-wrapper a img {
  transition: 500ms;
  margin-bottom: 0;
  }

  .postid-1432 .grid-link-wrapper:nth-of-type(1) a:after {
  color: white;
  content: ‘Pricing’;
  display: inline-block;
  padding: 10px 12px 12px;
  border: 2px solid #fff;
  margin: 0 auto !important;
  position: absolute;
  bottom: 66px;
  left: 59px;
  min-width: 17px;
  }

  .postid-1432 .grid-link-wrapper:nth-of-type(2) a:after {
  color: white;
  content: ‘Products’;
  display: inline-block;
  padding: 10px 12px 12px;
  border: 2px solid #fff;
  margin: 0 auto !important;
  position: absolute;
  bottom: 65px;
  left: 54px;
  min-width: 17px;
  }

  .postid-1432 .grid-link-wrapper:nth-of-type(3) a:after {
  color: white;
  content: ‘What We Do’;
  display: inline-block;
  padding: 10px 12px 12px;
  border: 2px solid #fff;
  margin: 0 auto !important;
  position: absolute;
  bottom: 65px;
  left: 35px;
  min-width: 17px;
  }

  .postid-1432 .grid-link-wrapper:nth-of-type(4) a:after {
  color: white;
  content: ‘How OCS Adds Value’;
  display: inline-block;
  padding: 10px 12px 12px;
  border: 2px solid #fff;
  margin: 0 auto !important;
  position: absolute;
  bottom: 65px;
  left: 0;
  min-width: 17px;
  }

  .postid-1432 .grid-link-wrapper:nth-of-type(5) a:after {
  color: white;
  content: ‘Coffee Facts’;
  display: inline-block;
  padding: 10px 12px 12px;
  border: 2px solid #fff;
  margin: 0 auto !important;
  position: absolute;
  bottom: 65px;
  left: 40px;
  min-width: 17px;
  }

  .postid-1432 .grid-link-wrapper:nth-of-type(6) a:after {
  color: white;
  content: ‘Ccontact Us NOW’;
  display: inline-block;
  padding: 11px 12px 12px;
  border: 2px solid #fff;
  margin: 0 auto !important;
  position: absolute;
  bottom: 65px;
  left: 13px;
  min-width: 17px;
  }
  }

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

• 

  bluelinebreakroom · Member · Apr 7, 2017 at 10:46 pm

  • Copy link

  For clarification, the label that says “products’ should be shifted right and the top left photo should read “Pricing”

• 

  bluelinebreakroom · Member · Apr 8, 2017 at 11:08 pm

  • Copy link

  Disregard. I found a fix that works