Photo Links In Line

• 

  bluelinebreakroom · Member · Feb 25, 2017 at 6:55 pm

  • Copy link
  • Add topic to favorites

  https://bluelinebreakroom.com/products/

  I have added a lot of CSS to different pages to get the photo links to appear correctly.

  On my products page, I have 4 photo links. I need to display them in line at the same size or three on top, and one centered below.

  In either situation, I would like them centered on the heading.

  I know my css is for a grid. I don’t know the CSS to put them in line.

  Any help is appreciated.

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

• 

  thesacredpath · Member · Feb 26, 2017 at 9:13 pm

  • Copy link

  Hi, add the following at the very bottom of your custom CSS and see what you think.

  @media screen and (min-width: 960px) {
  	.page-id-160 #content {
  		margin-left: auto;
  		margin-right: auto;
  		float: none;
  		padding-left: 3% !important;
  		padding-right: 3% !important;
  	}
  	.page-id-160 #content .grid-link-wrapper:nth-child(3n+4) {
  		margin-left: auto;
  		margin-right: auto;
  		float: none;
  		display: block;
  		right: 10px;
  	}
  }

• 

  bluelinebreakroom · Member · Feb 28, 2017 at 8:59 pm

  • Copy link

  Thanks. That worked great.

  I tried to apply the sam CSS to my Orange County Portfolio Page ( and I changed the Page ID to 418. But it doesn’t want to work. Is this because it is a “Portfolio” page?

  https://bluelinebreakroom.com/portfolio/orange-county-office-coffee-service/

• 

  thesacredpath · Member · Mar 1, 2017 at 6:52 pm

  • Copy link

  Hi, on the portfolio pages they are using a “post id”, so it would be this.
  .postid-418

  I’m seeing two rows of 3 on the page you reference. Did you get this sorted?