I have a Wordpress site that is using the OrganicThemes - Photographer theme. The demo site can be viewed here: http://organicthemes.com/demo/photographer/three-column-portfolio/
After I customized it for a while, I realized that the three-column portfolio is not centered in the 980px .row class. Because this is using Wordpress and PHP, when I inspect it in Chrome, it renders out in HTML, making it harder for me to understand how to fix the problem.
I included a screenshot of the issue I am facing. You can see in the blue box that the third image (aka <div class="one-third masonry-brick">) does not hit the 980px mark of the <div class="row holder-third masonry">, which makes the second image not center correctly, which basically causes the whole thing to be off.
You can find the different class information in the style.css and the organic-shortcodes.css, which helps for understanding the .row and .one-third classes, but I think the real problem is in the jquery.custom.js file. I believe the main code in that file that is of concern to the problem is this:
/* Masonry ---------------------*/
function masonrySetup() {
$('.holder-third').masonry({
itemSelector : '.one-third',
gutterWidth : 0,
isAnimated: true,
columnWidth : function( containerWidth ) {
return containerWidth / 3; }
}).imagesLoaded(function() {
$('.holder-third').masonry('reload');
});
I have tried to figure out how to fix this, but all I could come up with is how to fix the rendered HTML code, which basically would be to make the second image box be at left: 340px; and the third image box should be at left: 680px;, which would then make them centered and even.
But I know that this won't be of any help. Somehow I need to fix the Masonry code in the custom jquery file, and possibly change some of the CSS of the div classes.
I hope someone can help explain the problem better, and possibly shed some light on how to fix this problem! Thanks in advance!
UPDATE: I added some of the CSS style codes in case that is more helpful to find a solution to the problem.
The layout rendered out in Chrome's inspect element is this:
<!-- .container portfolio -->
<div class="container portfolio">
<!-- BEGIN .row -->
<div class="row holder-third masonry" style="position: relative; height: 827px;">
<!-- BEGIN .one-third -->
<div class="one-third masonry-brick" style="position: absolute; left: 0px; top: 0px;">
<!-- BEGIN .one-third -->
<div class="one-third masonry-brick" style="position: absolute; left: 326px; top: 0px;">
<!-- BEGIN .one-third -->
<div class="one-third masonry-brick" style="position: absolute; left: 653px; top: 0px;">
What I don't get is how the positioning is working, when the CSS doesn't say absolute? And I don't see any masonry-brick class anywhere...where is that coming from?
The container portfolio CSS:
.container.portfolio {
background: none;
overflow: visible;
box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
}
.container {
background: #FFFFFF;
max-width: 980px;
margin: 0px auto 0px;
}
The row CSS:
.row {
width: 100%;
max-width: 980px;
min-width: 727px;
margin: 0 auto;
}
The one-third CSS:
.container.portfolio .one-third {
max-width: 312px;
margin: 0px;
padding: 0px;
}
* Columns *
.one-third {
width:30.66%;
}
.one-half, .one-third, .two-third, .three-fourth, .one-fourth, .one-fifth {
position: relative;
margin-right: 4%;
float: left;
}
And then this is the code that seems relevant to the problem from the template-portfolio-three.php file.
<!-- .container portfolio -->
<div class="container portfolio">
<!-- BEGIN .row -->
<div class="row holder-third">
<?php $wp_query = new WP_Query(array('cat'=>of_get_option('category_portfolio_three'),'posts_per_page'=>of_get_option('postnumber_portfolio_three'),'paged'=>$paged)); ?>
<?php if($wp_query->have_posts()) : while($wp_query->have_posts()) : $wp_query->the_post(); ?>
<?php $meta_box = get_post_custom($post->ID); $video = $meta_box['custom_meta_video'][0]; ?>
<?php global $more; $more = 0; ?>
<!-- BEGIN .one-third -->
<div class="one-third">
<!-- BEGIN .postarea portfolio -->
I see the <div class="one-third"> and wonder if code needs to be added to that area in order to fix my problem?
