Center row of photo links

• 

  bluelinebreakroom · Member · Mar 31, 2017 at 6:52 am

  • Copy link
  • Add topic to favorites

  https://bluelinebreakroom.com/coffee-service/products/

  On the above page, I have 5 photo links. I would like to move the “Contact” photo link in line with the “Equipment” photo link and center them.

  I can not figure out how to adjust my existing CSS to do this. Here is my CSS.

  /*PRODUCTS PAGE PHOTO LINKS*/
  @media screen and (min-width: 960px) {
  .page-id-160 #content {
  margin-left: auto;
  margin-right: auto;
  float: none;
  padding-left: 4% !important;
  padding-right: 0 !important;
  }
  }

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

  .page-id-160 .grid-link-wrapper:nth-of-type( 3n + 2) {
  margin-left: 2%;
  margin-right: 2%;
  }

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

  .page-id-160 #content .grid-link-wrapper:nth-child(3n+4) {
  margin-left: auto;
  margin-right: auto;
  float: none;
  display: block;
  right: 10px;
  }

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

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

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

  .page-id-160 .grid-link-wrapper:nth-of-type(2) a:after {
  color: white;
  content: ‘Snacks and Drinks’;
  display: inline-block;
  padding: 10px 12px 12px;
  border: 2px solid #fff;
  margin: 0 auto !important;
  position: absolute;
  bottom: 65px;
  left: 13px;
  min-width: 10px;
  }

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

  .page-id-160 .grid-link-wrapper:nth-of-type(4) a:after {
  color: white;
  content: ‘Equipment’;
  display: inline-block;
  padding: 10px 12px 12px;
  border: 2px solid #fff;
  margin: 0 auto !important;
  position: absolute;
  bottom: 65px;
  left: 42px;
  min-width: 10px;
  }
  .page-id-160 .grid-link-wrapper:nth-of-type(5) 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: 10px;
  }

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

• 

  otpidusprime · Member · Mar 31, 2017 at 8:25 am

  • Copy link

  Hi,
  The Contact Us Now photo link is in display: block mode and not in display: inline-block mode like the other photo links, and hence it’s not inline with the other photo links.

  To make it inline, remove the following CSS code:

  .page-id-160 #content .grid-link-wrapper:nth-child(3n+4) {
      margin-left: auto;
      margin-right: auto;
      float: none;
      display: block;
      right: 10px;
  }

  Now to center the grid photo links, just add “text-align: center” to the following CSS code:

  #content.two-thirds .page {
      width: 99%;
  }

  After adding the center code, the new CSS will look like this

  #content.two-thirds .page {
      width: 99%;
      text-align: center;
  }

  Hope this helps :)

• 

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

  • Copy link

  Thanks that worked!

• 

  otpidusprime · Member · Apr 1, 2017 at 6:08 am

  • Copy link

  Glad i could help. All the best :)