Masonry Portfolio Thumbnail Size


#1

hey there,

I wanted to ask how to increase the grid/thumbnail size of the masonry portfolio I inserted through the shortcode. Ideally, I’d like to see a maximum of 2 or 3 projects per row. so far I’ve changed the thumbnail size in the plugin main file and regenerated all thumbnails. could you help me with the changes I need to make in order to increase the gridsize? thanks a lot! cheers, mickey


#2

Hi,
Here is to display the portfolios with 2 column per row, you can using custom css plugin to apply this code:

.roll-project.fullwidth .project-item {
    width: 50%;
    position: relative !important;
    left: 0 !important;
}

.project-item img {
    width: 100%;
    height: 300px;
    max-width: none;
}

#3

thanks a lot @Awan - works just fine though there’s two little issues now: 1 there’s a massive gap between every row of projects and 2 it only shows 4 projects right now, it should be all of them - see the screen grab.
any idea? thanks in advance!!

screen grab


#4

hey again - any input on that issue? thanks a lot!


#5

Hi, sorry for the delay.

can you share your site link to here?


#6

no worries! yeah sure, here you go: http://philipppacher.net
thanks!


#7

Hi,

you can try to add this code also, I thought:

.project-wrap {
    height: auto !important;
}

.project-item.item {
    top: auto !important;
}

#8

hey @Awan thanks for the code. it did work indeed, however, it somehow overwrites the full-width setting so now there are 2 projects in each row (correct) but they don’t stretch over the whole width of the page. also, the hover-effect is now gone…

here’s all the custom css I’m currently using:

/* Enter Your Custom CSS Here */

.roll-project.fullwidth .project-item {
width: 50%;
position: relative !important;
left: 0 !important;
}

.project-item img {
width: 100%;
/*height: 300px; */
max-width: none;
}

.project-wrap {
height: auto !important;
}

.project-item.item {
top: auto !important;
}

thanks a lot, appreciate it!


#9

hey @Awan - sorry to bother you again. any chance you could provide me with a solution to this issue? big thanks in advance


#10

@mickey Thank you for your code. It works.
However, have you resolved how to display 3 projects by row? (sydney pro theme)

Thank you by advance for your help.


#11

Hi @mickey

To have a full width of the row widgets, please make sure the row of the project (visual editor) widgets has row layout with “Full width stretched”

and I’ve just check your site and the hover effect of the projects are not gone, it has white color


#12

Awan,

I am not sure how to achieve the “full width stretched”.

My current page that I am working on is www.laurameyerdesign.com/projects-test. I would like the projects to stretch the whole width of the page. Is that only an option with Sydney Pro?

Laura


#13

Nevermind, I found it. Needed to edit the row and look under template or whatever the option is to the right.