Cant center photo links

• 

  bluelinebreakroom · Member · Mar 31, 2017 at 4:51 am

  • Copy link
  • Add topic to favorites

  On several of my pages, I have a single contact photo link at the bottom of the page. I used the same HTML and CSS for each page.

  For some reason, I can not get the photo link to center on the pages. I inspected my CSS and can’t find an error but being new to CSS, I could be way off.

  Here is one of the pages:
  https://bluelinebreakroom.com/coffee-service/products/gourmet-coffee-products/

  Here is an example of the CSS I used on each page.

  /*Coffee and Tea Products*/
  
  @media screen and (min-width: 960px) {
  .page-id-210 #content {
  margin-left: auto;
  margin-right: auto;
  float: none;
  padding-left: 3% !important;
  padding-right: 2% !important;
  }

  @media screen and ( min-width: 960px) {
  .page-id-210 .grid-link-wrapper {
  width: 30%;
  float: left;
  margin-bottom: 30px;
  }

  .page-id-210 .grid-link-wrapper {
  display: inline-block;
  overflow: hidden;
  background: #333;
  margin-bottom: 2px;
  position: relative;
  }

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

  .page-id-210 #content .grid-link-wrapper a img {
  transition: 500ms;
  margin-bottom: 0;
  }

  .page-id-210 .grid-link-wrapper:nth-of-type(1) a:after {
  color: white;
  content: ‘Contact Us NOW’;
  display: inline-block;
  padding: 10px 12px 12px;
  border: 2px solid #fff;
  margin: 0 auto !important;
  position: absolute;
  bottom: 65px;
  left: 18px;
  min-width: 17px;
  }
  }

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

• 

  thesacredpath · Member · Mar 31, 2017 at 9:29 pm

  • Copy link

  Hi there, you have a float: left; in your @media screen and ( min-width: 960px) CSS rule for page-id-210.

  @media screen and ( min-width: 960px) {
  	.page-id-210 .grid-link-wrapper {
  		width:30%;
  		float:left;
  		margin-bottom:30px;
  		display:inline-block;
  		overflow:hidden;
  		background:#333;
  		margin-bottom:2px;
  		position:relative
  	}

  Remove the float left, the position: relative and change the display inline-block to display block and then add a margin-left and margin-right auto so it looks like this.

  .page-id-210 .grid-link-wrapper {
  		width:30%;
  		margin-bottom:30px;
  		display:block;
  		overflow:hidden;
  		background:#333;
  		margin-bottom:2px;
  		margin-left: auto;
  		margin-right: auto;
  	}

  You can use the above as a guide for fixing any other places this is occurring.

• 

  bluelinebreakroom · Member · Mar 31, 2017 at 10:38 pm

  • Copy link

  That worked great. I had to keep the position: relative or the ‘contact’ label moved to the bottom of the screen.

  Thanks!

• 

  thesacredpath · Member · Apr 1, 2017 at 5:09 pm

  • Copy link

  You are welcome.