Columns not working

@jfperelman Hi! Thank you for checking out the plugin. ??

Without more details or seeing an example page with the portfolio shortcode in it, I cannot give much help. My initial “guess” would be that you are using the default CSS, which specifies a hard width on the listings, and the container the shortcode is in is not wide enough to allow for your chosen columns.

If that isn’t the reason, then please provide more details, such as a link to see it in action (may be enough to answer the questions of CSS, as I can view it in an editor).

Cheers!

Brandon

Hi! Thanks for getting back to me. I’m very new to making website so most of that went over my head.. but I think I get the general idea. I don’t have any clue how to fix it though.

Here’s the page with my portfolio: https://jennaperelman.com/writing/
I’m using a free WordPress theme from Themify called Simple. I haven’t done anything to the page except put in the portfolio code so whatever that theme has set as its standard page is what I’ve got.

Hello again!

Ok, so it looks OK to me. When I visit your page, I see three columns.

What is your browser resolution? Screen size? Are you using a tablet or something with a small screen?

It looks like the theme you chose is responsive (good), but that also means that if you squeeze the page narrower, then the portfolio columns will gracefully collapse to fluidly maintain the responsive design. Could that be what you’re seeing??

Best regards,

Brandon

Hi Brandon,

I got the plugin to display in 3 columns by using the shortcode [wp-portfolio columns=”4″]. When I use the shortcode for 3 columns, I only see two. I am using a 13″ Macbook Pro with Google Chrome with the window stretched over the entire screen. Even when I go into full-size, I still see one column less than what I have put in. I will try to access it on a desktop, but don’t have that ability at the moment.

My wish is for the portfolio to extend into the white space on the right-hand side so it looks balanced. I will leave the shortcode for 3 columns until you respond so you can see if it displays 3 columns on your end. I’m including a screenshot of what I see with [wp-portfolio columns=”3″] and a red box indicating the white space I want filled.

Hello again! ??

Ok, so your testing and observations confirmed my suspicion that this was a CSS spacing issue. In short, the developer who added the “responsive column” or “elastic grid” support divided the width by the columns, evenly. However, he did not consider the default padding would take up some space, so you get the flaky behavior that 3-columns “may”, in some designs, only show in 2-columns, and the problem would increase from there as you increase the columns.

So, the quick fix is to edit the CSS in https://jennaperelman.com/wp-content/plugins/wp-portfolio/columns.css as follows:

Change:

.wpp_columns-3 {
    display: inline-block;
    vertical-align: top;
    width: 32%;
}

To:

.wpp_columns-3 {
    display: inline-block;
    vertical-align: top;
    width: 30%; /* We just need a little narrower blocks to allow for padding */
}

That shows me 3-columns with your current layout and fills the blank space.

I will open a new task to have my current developer update the column widths to better account for the default padding. Thank you for taking the time to make a report!

And please let me know if that does or does not resolve your issue.

Best regards,

Brandon
p.s. To anyone else having this issue, the permanent fix for this should be included in the next release v1.42.3.

Brandon, thank you for all your help! Your support means a lot because all of this feels a bit intimidating.

I feel like a total noob, but I’m having trouble editing the css file so that it works. I figured out that I can use Cmd + option + I to open up the backend and edit that link you sent me, but it doesn’t seem to stick? How do I get it to save?

I tried a different way by installing the Simple Custom CSS plugin, but that didn’t seem to work either. What am I doing wrong?

Hello,

I’m a bit of a noob with WordPress myself, although learning quickly. ??

I have never tried modifying WP CSS without using FTP or the theme editor (won’t change plugin CSS, though), so I took a quick look and found that I don’t think you need that simple custom CSS plugin. It looks like it was needed many years ago but not since WordPress added support for custom CSS in it’s theme customizer, and it’s always a good idea to avoid installing plugins you don’t absolutely need.

I just tested this by clicking on Appearance -> Customize -> Additional CSS and entered in the changes there. They seemed to work on my test install. If you ever have a stubborn CSS, you might try adding !important (though you should try your best not to). So try this first:

.wpp_columns-3 {
width: 30%;
}

and if it still doesn’t work, then try this:

.wpp_columns-3 {
width: 30% !important;
}

I made the code changes a bit more compact by removing the first two lines that aren’t needed in your customization. So, just try the above to test.

Just remember that once I release the v1.42.3 with the fix, you’ll be better off to remove this customization. It’s not good to leave overrides hard coded when they aren’t needed. Doing so could cause you headaches later when you decide to change things. ??

Let me know if that helps at all!

Cheers,

Brandon

Oh, and just had the thought that this “quick fix” will work ONLY for 3-column layout. So, be sure you’re set back to 3-columns. ??

The permanent fix will account for all supported column counts.

Hello!

The v1.42.3 release has been published. When you get a chance, could you remove the custom CSS, upgrade your WP-Portfolio, and confirm that this issue is fixed for your layout?? For posterity, it would be nice for us, and others, to know for certain.

I used a developer toolkit to test these changes (temporarily in my browser but using your actual, exact site’s code), and this fix worked. However, there are sometimes rare nuances from testing that way versus “doing it live”. So please let us know! ??

Ciao!

Brandon

Hello!

It has been awhile without any confirmation, so I’m going to assume it is fixed. ??

In our testing, it worked, and nobody else has reported the same issue since the new release. If you come back here, please confirm fixed and if you LOVE this plugin, please leave a 5-star review here: https://www.ads-software.com/support/plugin/wp-portfolio/reviews/

Cheers!

Brandon