How can I change the portfolio front page thumbnail grid?

  • Author
    Posts
  • #128666

    leebu
    Member

    The grid images on the front page are wider than they should be and only two per row.

    How can I change that grid to be 4 per row per your ‘The Grid’ options?

    Do I have to create my front page by hand to accomplish this?

    Thanks,
    Lee

    The blog I need help with is leebutler.photography.

    #128781

    mkrdip
    Theme Author

    Hi Lee,

    You have changed the theme to a different one, so I couldn’t see the issue. When you get to Creative Portfolio, let us know.

    Cheers.

    #128790

    leebu
    Member

    I have switched back to Creative Portfolio and you can see there are 4 projects with huge covers. The covers also do not look very good.

    #128791

    leebu
    Member

    I created a couple of extra projects to see what would happen and how it is a 3×2 grid instead of a 2×2 grid. Is there a way choose a minimum cover count per row??

    #128813

    mkrdip
    Theme Author

    Hi Lee,

    You would need CSS codes to fix the issue:

    @media only screen and (min-width: 640px) {
        #front-page-portfolio .four:first-child:nth-last-child(4) {
            width: 33.333333333333%;
            width: -webkit-calc((100%/12)*4);
            width: calc((100%/12)*4);
        }
    }

    Which will force to have 3 column per row, which is max number of items for the front page in our theme.

    Hope this helps.

    Cheers.

    #128817

    leebu
    Member

    Thanks!

    During experimentation it looks like there is also a max of 6 covers on the front page. Is that changeable?

    #128818

    leebu
    Member

    That CSS only changed the width on the first cover…

    #128847

    mkrdip
    Theme Author

    Hi Lee,

    During experimentation it looks like there is also a max of 6 covers on the front page. Is that changeable?

    If you are a business plan user or self-hosted user, I can give you child theme to do that.

    Instead of the previous CSS please use this:

    @media only screen and (min-width: 640px) {
        #front-page-portfolio .four:first-child:nth-last-child(4)~.four, #front-page-portfolio .four:first-child:nth-last-child(4) {
            width: 33.333333333333%;
            width: -webkit-calc((100%/12)*4);
            width: calc((100%/12)*4);
        }
    }

    Cheers.

    #128848

    leebu
    Member

    Thanks. That CSS did the trick.

    I don’t have a premium plan on wordpress.com and don’t really need the business plan at this point so I’ll work with 6 on the front page.

The topic ‘How can I change the portfolio front page thumbnail grid?’ is closed to new replies.