Centering projects

I have 3 projects in my Portfolio row that will not center on the page, they are left aligned.

I have read all threads already posted about this topic, but none of the CSS snippets have worked for me.

My site is here:

http://emiwee.staging.wpengine.com/

Hello there,

Thank you for reaching out to us here. Please follow this solution.

Regards,
Kharis

Thanks for the response Kharis, but I already found this thread and tried this solution.

I added the script to the footer section. It moves the portfolio tiles a little to the right but does not fully center them. Any other ideas?

I also forgot to mention – adding this script also messes up the responsiveness of the tiles. They do not resize and stack like they should.

The responsiveness of projects positioning which is handled by the jQuery code won’t work while gradually resizing the browser window. But it will looks fine while it is accessed directly on a mobile device. To prove it, refresh your page after resizing your browser window.

Regards,
Kharis

Ok, thanks, the responsiveness works after I refresh. But the tiles still are not centered on the page – any advice for this?

Hello there,

Please try to replace these lines:


var itemWidthTotal  = projItem.width()*itemCount;
var visibleSpace    = $(this).width()-itemWidthTotal;

with:


var itemWidthTotal  = projItem.outerWidth()*itemCount;
var visibleSpace    = $(this).outerWidth()-itemWidthTotal;

I noticed that this custom jQuery code addition produces horizontal scroll bar at the bottom of the browser window. To hide it, could you please try to apply the following CSS code through the Simple Custom CSS plugin or child theme’s style.css?

body{
  overflow-x: hidden;
}

Regards,
Kharis

That didn’t work either.

Hello there,

Please try to replace all of the code with this one:


<script>
(function($){
      
  if ( matchMedia( 'only screen and (min-width: 768px)' ).matches ) {
    $(window).load(function(){ 		
      
      $('.roll-project').each(function(){

        var projItem        = $(this).find('.project-item ');
        var itemCount       = projItem.size();
        var itemWidthTotal  = projItem.outerWidth()*itemCount;
        var visibleSpace    = $(this).outerWidth()-itemWidthTotal;
        
        if(itemCount < 5 && itemWidthTotal < $(this).width()){
        
          $(this).css({
            'margin-left': visibleSpace/2+'px'
          });
          
        }
      
      });
    });	
  }  

})(jQuery);
</script>

Regards,
Kharis

It works! Thank you very much.

Although now on mobile the row title is misaligned and the project tiles are tiny.

Hello there,

It seems like you applied the following custom CSS code to enlarge the project items.


@media only screen and (min-width:991px){
  .roll-project.fullwidth .project-item {
      width: 25%;
  }
}

I am marking this thread as resolved. So, please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis

Hey,
I’m trying to center my portfolio too and it doesn’t work for me.
Tried to insert the code from this thread and all the codes above.

I hope it something that can be solved easily. Unfortunately the site because is on developing stage and cannot be seen by others, but with an IP address I can give you access to check it out.

Thanks,
Hadas