Okay
  Public Ticket #324426
Portfolio Grid: Center vs Left Justified
Closed

Comments

  • Pete started the conversation

    Hey Guys!

    By default, the portfolio grid in this template has 4 columns and is left justified. For one of my portfolio sections, I only have 2 projects so it seems a little empty if they are left justified. Is there a way I can center these two projects on the page? Attached is a screen shot to what I am referencing. 

    Is there a way to lock the two bottom projects to the center of the page?

    Thanks in advance!

    Pete

  •  14
    Nick replied

    Hey Pete,

    Sorry for getting back to you so late, but I was away for a couple of days.

    As for your question, as this is a percentage based grid for the projects it's really difficult to implement some push classes and so on to achieve the effect. The easiest solution I can think of is creating 4 thumbnails and removing the images and project info from the first and last thumbnail so the two left would be in the center. Let me know if this works for you.

    Thanks,
    Nick


    aetherthemes

  • Pete replied

    Hey Nick!

    Yeah I thought about doing that. And maybe I'll just push the click-state of the first "empty" thumb nail to the second thumbnail and the fourth "empty" thumb nail to the third. Just in case a user accidentally rolls over it. I'll try it and see how it looks, just wanted to see if there was another solution! 

    No worries, Love the template otherwise~!

    Thanks again-

    Pete

  • Pete replied

    Hey guys!

    Is there any way to either 

    a) Killer the hover state on the now "blank" thumbnail i have added in the attached screen shots. 

    or

    b) make the hover state of that particular thumbnail white?

    I just don't want the user to think something is there if they accidentally hover over that blank space. Currently I am linking that "blank" thumbnail to point to the photography section as default as a temporary fix but it would be great if we could lose the hover state on that one thumbnail all together.

    Thanks in advance!

    Pete

  •  14
    Nick replied

    I would add a class to the thumbnails you use as 'pushers' and just style the hover with white background and 'cursor: normal', if you don't know how to do that let me know I'll write up the CSS you need.


    aetherthemes

  • Pete replied

    Hey Nick! Thanks again for the response. 

    I'm not completely sure how to do that. I know what you are describing but not sure what the code for that would be. 

    Thanks so much!

    I have one more question regarding images not displaying on mobile but I'll open a separate ticket for that. 

    Pete

  •  14
    Nick replied

    Just add the class 'pusher' to the blank thumbnails (on the list item) in your markup and in your CSS just add the following:

    .pusher a {
      cursor: normal!important;
    }
    
    .pusher a:hover {
      background: #fff!important;
    }

    aetherthemes