Yet another Portfolio styling questions (Renew)

Support
#1

Hi, there. I have searched the forums (and google) and come up empty trying to style the portfolio on my site. I know that X’s options for this are limited, but I figured I’d ask here just in case it was possible…

My site:
http://www.pigapple.com/our-work/

I’d like to style the portfolio differently in a few ways…

  1. I’d like the portfolio width to only take up 75% of the page, with white space on either side of the content, like the other pages on my site. I figured out how to do this for the single portfolio item pages, but can’t figure out how to apply it to the main portfolios. Basically the same effect as this button in Customizer…

  2. I’d like to remove the grey outlines and the margins around each portfolio item so that all the images are just tiled together with no white space between (or, adjust the amount of white space to my liking)

  3. I’d like to customize the title at the top of the portfolio to match my other pages. However, I created those other page titles with the “headline” and “line” elements in Cornerstone. Is it possible to match them on the portfolio page at all? Perhaps by turning off the “page title” and actually coding that look into each portfolio category page?

Thanks in advance for your time and help!

#2

Hello @macklikeatruck,

Thanks for writing in!

Please add following CSS X > Theme Options > CSS:

.page-template-template-layout-portfolio .x-main.full {
    width: 75% !important;
    margin: 0 auto !important;
}

Please add following CSS under X > Theme Options > CSS:

.page-template-template-layout-portfolio .entry-featured {
    border: none;
    padding: 0;
}
.page-template-template-layout-portfolio .x-iso-container>.hentry {
    padding: 0;
}

Please add following CSS under X > Theme Options > CSS:

.page-template-template-layout-portfolio .h-landmark span{
    margin: 0 calc(0em * -1) 0 0;
    font-family: inherit;
    font-size: 1.5em;
    font-style: normal;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: 0em;
    text-align: left;
    text-transform: none;
    color: #993333;
}

1- I have found the proper CSS code selector using the Chrome browser Developer Toolbar: https://www.youtube.com/watch?v=wcFnnxfA70g

2- For the CSS code itself, I suggest that you get started with this tutorial: https://www.youtube.com/watch?v=yfoY53QXEnI

Thanks.

#3

Hi, Prasant. Thanks so much for getting back to me. This code is great and (mostly) did exactly what I’d hoped. I am somewhat familiar with CSS, but couldn’t figure out how to call out the portfolio pages to apply the designs. Thanks so much for your help.

I am still having a couple of issues I’m hoping you may be able to further help me with.

While your code helped me eliminate the padding and border around each portfolio item, there still seems to be about a 1-2px gap in the horizontal space between items. Is there any way to get rid of that so the images are all directly next to each other with no gap? (Like they are arranged vertically.)

Also, there is a thin horizontal line at the top of each portfolio page. It’s barely noticeable, but I’d like to turn it off, if possible.

Any further help would be greatly appreciated, thanks!

#5

I was able to get rid of the horizontal line, but the gap between portfolio items remains. Any way to get rid of that?

#6

Yay! I was able to figure out a solution. Possibly not the most elegant, but it seems to be working.

.x-iso-container>.hentry {
margin: -.3px;
}

#7

Hey @macklikeatruck,

That should be fine but you may also find this code:

.x-iso-container {
    margin: -1.5em;
}

then update it to:

.x-iso-container {
    margin: -1.8em;
}

Hope this helps.

#8

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.