Portfolio Formatting

• 

  coresportcommunications · Member · Oct 19, 2016 at 12:57 am

  • Copy link
  • Add topic to favorites

  Hi everyone!

  For our website, we have integrated portfolios on three separate pages. One on the “Our Clients” page which includes all posts with the “all-clients” tag; one on the “Current” page which includes all posts with the “current-client” tag; and one on the “Past / Completed” page which includes all posts with the “past-client” tag. We like the formatting that appears when we select “portfolio” from the template dropdown, however, when this is selected, all clients are included on the page.

  We tried to use shortcode for these pages (resetting the template of the page to “default template”), so we could differentiate between the various tags, which worked. We now have only the current clients on the “Current” page, past clients on the “Past / Completed” pages, and all of the clients on the “Our Clients” page – which is what we want. However, the shortcode has caused the formatting to disappear.

  We are wondering if there is a way to regain the formatting that is seen when “portfolio” is selected from the template dropdown menu, while still allowing us to separate our various clients by tag onto the three distinct pages.

  If this is not a possibility, is there a way that we can adjust the formatting of the portfolio we have included with the shortcode? What we would want (in the least) is changing the font and formatting so that the photos match the headline photos we have included in our blog/for our posts (which can be seen on our Community Core-ner page). Basically, we want to have the same font included in white (and within a white square) appear centered on top of the image for each client in the portfolio.

  Please let me know how we can do this!

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

• 

  thesacredpath · Member · Oct 19, 2016 at 8:19 pm

  • Copy link

  Hi, let’s give the following a try. Paste this into your custom CSS below what you have already and make sure and view your site on a phone and tablet as well. I’ve used Media Queries to control positioning on smaller screens and it appears to work on all screen/window sizes, but do check just to make sure.

  .portfolio-entry .portfolio-entry-title {
      border: 4px solid #fff;
      border-radius: 6px;
      font-size: 2.6em;
      left: 50%;
      margin-top: 0;
      padding: 8px 12px;
      position: absolute;
      text-align: center;
      top: 25%;
      transform: translateY(-50%) translateX(-50%);
  }
  .portfolio-entry {
      position: relative;
      box-sizing: border-box;
  }
  .portfolio-entry .portfolio-entry-title a {
      color: #fff;
  }
  @media screen and (max-width: 900px) {
  	.portfolio-entry .portfolio-entry-title {
  		font-size: 2em;
  	}
  }
  @media screen and (max-width: 650px) {
  	.portfolio-entry .portfolio-entry-title {
  		font-size: 1.4em;
  		min-width: 50%;
  		max-width: 80%;
  		width: 100%;
  		padding: 4px 6px;
  	}
  }
  @media screen and (max-width: 450px) {
  	.portfolio-entry .portfolio-entry-title {
  		top: 15%
  	}
  }