Sydney FP: Porfolio

Hello,

I would like to put a space between my projects as they are shown on my front page, within the portfolio widget.

The three project thumbnails are currently touching each other and I can’t seem to separate them. Ideally I’d like to put a slight space between them so the three projects seem distinct.

Everything looks and feels great, except for the spacing of the thumbnails.

Please help.

Hello there,

Could you please try to apply the following CSS code through the Simple Custom CSS plugin or child theme’s style.css?

@media only screen and (min-width:480px){
  
  .roll-project .project-item{
    padding: 10px;
  }
  
  .roll-project .project-item .project-pop {
    width: calc(100% - 20px);
    width: -webkit-calc(100% - 20px);
    width: -moz-calc(100% - 20px);
    height: calc(100% - 20px);
    height: -webkit-calc(100% - 20px);
    height: -moz-calc(100% - 20px);
  }  
  
}

Regards,
Kharis

1 Like

It worked!

You are amazing :slight_smile:

Many thanks,

-Gabriel

You’re always welcome here. :slight_smile:

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

Hi Kharis,

I had the same problem and used your solution above - it worked and it looks much better, thanks.

The title for the projects, though, which displays when I hover over the project’s image, is not centred. Is there a way I can fix this?

Thanks,
Sophie

http://www.kickstartcontent.com/copywriting-portfolio/

Hello Shophie,

To accomplish it, please follow these steps:

  1. Install and activate the TC Custom JavaScript plugin
  2. Go To Appearance > Custom JavaScript
  3. Paste the following code into the provided box

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

    $('.roll-project').each(function(){

      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()){
      
        $(this).css({
          'margin-left': visibleSpace/2+'px'
        });
        
      }
    
    });

  }  

})(jQuery);

  1. Update

Regards,
Kharis

Hi Kharis,

I’ve done this but the text still isn’t centred.

Any other ideas?

Thanks,
Sophie

Hello Sophie,

Try to replace the code with this one:


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

    $('.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);

Let me know how it goes.

Regards,
Kharis

Thanks for your quick reply Kharis.

Still not centred, unfortunately

Viewing the source code of your site, it looks like you pasted the code from email which is encoded. Please use the plain code in our support forum.

Regards,
Kharis

Sorry about that Kharis.

I pasted direct from here but still no change.

Try to clear your web browser’s cache and reload your page.

Regards,
Kharis

Hi Kharis,

I tried this, still not centred.

Thanks,
Sophie

I’m really clueless until this point, sorry. The code works fine on my test site as seen on the following screenshot.

Cloudup

The code I suggested was based on the code I suggested previously for other user who had similar problem. He said it worked on this thread.

Visiting your project page, it is now containing more than 5 project items. So you don’t need any centering code anymore, right?

Regards,
Kharis

Hi Kharis,

I’m sorry, I think there may have been a mix-up. Did you realise it’s the header text (that shows when I hover over the portfolio images) that I’m trying to centre, not the actual images themselves?

Your screenshot above doesn’t show that and the thread you linked seems to be about centring the images themselves. I’ll add a screenshot below - see how the words don’t fit into the image and it looks messy?

Hover Text Centering Issue

Thanks,
Sophie

Hello Sophie,

I am sorry, I kept focusing on centering image you mentioned on this reply.

You’ll only need to add the following CSS code into Appearance > Customize > Additional CSS in your site’s dashboard.


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

Let me know how it goes.

Regards,
Kharis

Thanks so much, Kharis, that’s done it!

Sorry if I confused you!

Thanks again for sticking with it and helping me figure this out!

Sophie

You’re welcome and best wishes!

I tried to get the space but the code doesn’t work, please see below for reference:

yourvisa.ca/community

Hello there,

What code did you apply? I didn’t find the below extra code applied by viewing the source code of your site.

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

Regards,
Kharis