Portfolio Centering


#1

Hey Guys,

Me again. I’m trying to center align the portfolio plug in but when I try to do it just with css in the widget I can’t get it to work and when I hit center align in the row style section, it does this weird miss alignment with the overlay.

You can check it at www.sequentialmac.com, I’ve left the center align error so you see what I mean with the overlays.

Sorry to keep bugging!


#2

Hello there,

Thank you for reporting.

To fix it, could you please try to add the following CSS code either through the Simple Custom CSS plugin or child theme’s style.css?

.roll-project .project-item .project-pop {
  left: 0; 
}  

Let me know how it goes.

Warmest regards,
Kharis


#3

Hey Kharis

Your suggestion fixed the overlay but it is now all aligned to the left. The title of the widget is centered but the images are not. I added some color changes to the website so that it will be more obvious www.sequentialmac.com

Maybe instead of adding a left align to the overlay, I should remove a left align from the image?

Also, side question as I am working on this right now, what is the class or id I have to use in the CSS to edit the styling of the Page Titles? and possibly how to tag the Page Titles on Projects?


#4

Dear Miguel,

> The title of the widget is centered but the images are not.

Could you please try to add the following CSS code?

.roll-project{
  max-width: 970px;
  margin-left: auto;
  margin-right: auto;
}

.roll-project.fullwidth .project-item {
 margin: 0 !important; 
}  

> … what is the class or id I have to use in the CSS to edit the styling of the Page Titles?

Could you please try the following?

.page .entry-header .title-post{
  display: none;
}

If it doesn’t help, please refer me to its URL so I can have a look.

> … and possibly how to tag the Page Titles on Projects?

I thought it is possible to do. You should need to overwrite the single-projects.php template file in the child theme. Duplicate this file to your child theme. So you should have sydney-child/single-projects.php. Open it in your code editor, then add your title before the loop.

<main id="main" class="post-wrap" role="main">

<h2>Your title goes here</h2>

<?php while ( have_posts() ) : the_post(); ?>

Warmest regards,
Kharis


#5

Kharis,

We are getting there! If you check the link www.sequentialmac.com now the portfolio plugin is centered but the spacing effect I had managed playing with margins. I tried creating it with padding but then I need to add the same padding to the color overlay. What is the CSS class name for the overlay so I can edit it? I also realize it (if you take a close look) that the overlay is about 10 px bigger than the image in the bottom.

What would be a good way to add some spacing between the images? Preferably 20px.

And again, thanks so much of all the help.


#6

Hello there,

> I also realize it (if you take a close look) that the overlay is about 10 px bigger than the image in the bottom.

I noticed that there is 10px margin bottom at the p tag inside the portfolio item. Try to remove this margin bottom.

.roll-project.fullwidth .project-item p{
 margin-bottom: 0; 
}  

> What would be a good way to add some spacing between the images? Preferably 20px.

Try the following code. I thought the calc() property does the magic.

.roll-project.fullwidth .project-item{
  padding: 20px;
}

.roll-project .project-item .project-pop{
  width: calc(100% - 40px);
  width: -moz-calc(100% - 40px);
  width: -webkit-calc(100% - 40px);
  height: calc(100% - 40px);
  height: -moz-calc(100% - 40px);
  height: -webkit-calc(100% - 40px);
  left: 20px;
}

Let me know how it goes.

Warmest regards,
Kharis


#7

The calc command worked like a charm!! I think I’m going to investigate it well to use it in other projects. I still have some questions about styling the titles on projects and pages. Should I start a new topic or just continue here?


#8

Hello there,

Glad to know that the centering issue has been resolved already.

Regarding your other questions, it would be better if you post them in a new topic. I would be happy to take care of them for you there.

Warmest regards,
Kharis