Spacing project images across screen on all resolutions


How to I space the project images on the home page so it fills across the screen. It works ok on lower res screens but not on higher. You demo works fine across all screens.

Here is a link:

I have set all the images to 480 x 320 .png

Many Thanks

P.S I want to eliminate the white spacing

I have added this script to in the footer of script plugin but no good

  if ( matchMedia( 'only screen and (min-width: 768px)' ).matches ) {


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



Hello there,

I am sorry, I can’t get your point clearly as your second reply sounds contradict with the initial thread. Could you please elaborate your objective clearly?


  1. the project images are not centred

  2. they do not scale and fill the whole page

  3. Here is the link so you can view:


Hello there,

Did you intentionally apply the following CSS code in your child theme?

.project-item.item img {
    height: 180px;
    width: 300px;

Please confirm.


Hi, No I only downloaded it 2 weeks ago and have not touched an css

What should it be?

It might come from one of your active plugins. Please try to temporarily disable all plugins except Sydney Toolbox and Page Builder at once. To find out which one contains that code, activate them one by one. Make sure cache is disabled before doing so.

Let me know how it goes.


HA! Found it in custom css!

Why I added it I don’t know

Thanks for the help! Please close

You’re welcome!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.