Center Tile Images in Portfolio display using Sydney FP: Portfolio


#1

I want the tile images to Center instead of left justified. this is how it currently looks: Portfolio left aligned images This is how I want it to look: center align

I have been trying in the CSS but with no luck Any ideas where I need to change the code to center the images in the row?

Thanaks


#2

Hello there,

Thank you for getting in touch here.

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:768px){
  
  .project-wrap{
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
  }
 
  .roll-project.fullwidth .project-item {
    width: 50%;
  }  
  
}

If it doesn’t help, please share the URL in question, so I can take a closer look.

Regards,
Kharis


#3

This works for only if there are 2, but it needs to be dynamic to accommodate varying quantities per row up to a max width. The quantity range is 1 - 5 per row.

Here is the link http://lenka.l8t3r.com/ scroll down to works and you can see two instances of the projects. The rows that have less than maximum, I want them to center.


#4

Hello there,

You should do the container width adjustment manually. If you have 5 items, change max-width: 480px; line to max-width: 1200px;. It comes from 240 x 5 items.

Regards,
Kharis


#5

That solution is not possible when the site is handed off and the owner’s want to change the portfolio items. It needs to be coded in to be dynamic and center the tiles if less than the maximum width.

Here is the link http://lenka.l8t3r.com/ scroll down to works and you can see two instances of the projects. The rows that have less than maximum, I want them to center.


#6

Hello there,

I am looking into it. I will get back to you ASAP.

Regards,
Kharis


#7

Hello there,

Could you please try to do the following?

  1. Install and activate the Header and Footer Scripts plugin. Go to Settings > Header and Footer Scripts.

  2. Paste the following to the “Scripts in header:” box


<script>
(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);
</script>

  1. Save settings
  2. You would clear your web browser’s cache before reloading your site

Let me know how it goes. I’ll wait to hear back from you regarding your stats.

Thank you for your patience.

Regards,
Kharis


#8

It’s not working.


#9

Hello there,

I would like to apologize in advance for the misled. Please cut that code from “Scripts in header” box, then paste it into the “Scripts in footer” box.

Let me know how it works.

Regards,
Kharis


#10

Works now! Thank you.


#11

Great! I am glad to know that.

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

Have a nice weekend. :slight_smile:

Regards,
Kharis


#12

Good evening and thanks for the reply.

I’m having a slightly similar issue. For the moment I just added one project and its frame is centered. However, inside the frame there is a misalignment.

Misalignment

The website is inn-lab.co

How do you suggest me to fix this issue?

Thanks,

David


#13

Dear David,

Please try to remove the custom CSS you applied to align your portfolio item. Then do these steps. Let me know how it goes.

Regards,
Kharis


#14

Thanks! It worked great! So, would it keep the projects organised as we add them?

Regards,

David


#15

Dear David,

Yes, it will be adjusted automatically.

Regards,
Kharis


#16

Hi Kahris,

I have tried all that you have mentioned but, unfortunately i cannot seem to center the last 3 pic in the middle… I like the 5 in a row… i just want to have the last 3 right in the middle with 1 empty space each side…

Any help plzz

Link: http://www.auroraholdingsuae.com/newsite/


#17

The code only works when the tile items are less than 5. There is no way to achieve your objective. It reaches code limitation, I am afraid.

Regards,
Kharis


#18

Very well… can you please tell how i can make it 3 in each row or 4 in each row.

Thanks a lot for ur help.

Thanks

Josh


#19

I hope you are not trying to tell me that the total of items in my portfolio need to be less that 5. i understood that it needs to be less than 5 in a row… because i used this template before and it worked, the only thing is that i did not have to alter the code… it centered by itself. lol

Thanks

Josh