Docs

[System]

Hi,

I have recently update x and wordpress to the latest versions.

Under customizer, I no longer have the option to select the amount of columns to display in the gallery. The gallery/portfolio currently displays as a long single scrollable page.

Could you please provide some direction on how to return this functionality.

Thank you in advance.

Kind regards

[Zeshan]

Hi System,

Thank you for writing in!

You need to create a portfolio page and select “Layout – Portfolio” as it’s page template. After that you should have portfolio meta options.

To create page and enable portfolio meta options, please follow my directions:

– Create a portfolio page.
– Select Page template “Layout – Portfolio”. Screenshot: http://prntscr.com/41108f
– Scroll down till Portfolio Settings and select the Columns. Screenshot: http://prntscr.com/4110ks

That’s it 🙂

Hope this helps. If you face any issue, please let us know. We’ll be happy to assist.

Thank you.

[System]

Hi there,

Thank you for your assistance.

Keep up the great work.

Kind regards

[Christian]

You’re welcome.

[Medicoach]

I have the same problem. I’ve followed your instructions as above. But still I don’t get the option for selecting a number of columns for my portfolio. It’s stuck on two columns. There’s no way of changing this, as it appears…

I am still doing something wrong. Can’t figure out what!

Thanx for helping

[Cousett]

Can you send us your login credentials so we can take a closer look?

[Medicoach]

This reply has been marked as private.

[Cousett]

On http://www.medi-coach.net/wp-admin/post.php?post=6787&action=edit

about two-thirds of the way down there are portfolio settings for the columns.

I changed it to three and the portfolio now displays three columns

I hope this helps. Let us know if we can be of further assistance.

[Medicoach]

Thnx!

[Cousett]

Glad we were able to help. 🙂 Have a nice day.

[leannevenier]

Hi, I’m having similar issues with my portfolio columns. I’m using Renew stack and I’ve set up my portfolio to have the maximum 4 columns (I would choose even more for larger screens if there were an option for that).

I would like my portfolio to always show up with at least 3 columns, if not 4 on all smaller screens as well (the program is set up to be responsive on smaller screens, and it forces the thumnails to be full screen instead of shrinking them down based on the screen size.

Yes, the thumbnails will be smaller, but I have so many images in my portfolio, that I DO want to be able to see several thumbnnails on the screen at one time and then visitors can click on the ones that catch their eye, rather than having to scroll through giant images that fill the mobile screen, which menas they currentlyy have to scroll through a couple hundred images that way.

This is somewhat How I’d like my mobile and smaller screen portfolio to look on all mobile devices (with at least 3 columns, if not 4).
http://m.umbertosculpture.com/#!Sculptures

There’s no way that I can select the number of columns that I can see, since the system forces larger and larger thumbnamils depending on the screen size.

Can you tell me how to override the pre-programmed settings which make the portfolio thumnails get bigger and bigger depending on the device used?

Or can you provide me with the CSS code for each size screen where I can custom input the number of columns I’d like my portfolio to default to (there would probably be 6 or more lines of code that I’d have to input in the customize CSS box)

Thank you for any help you can provide!

My site is http://www.leannevenier.com

Thanks!

[Rue Nel]

Hello There,

Thanks for updating this thread!

Upon checking your site, we notice an invalid css entry in your customizer. Please remove the excess closing curly brace as shown here: http://prntscr.com/84t0xk

You can also add this code in your customizer, Appearance > Customize > Custom > CSS, so that on a tablet screen you will have two columns and on mobile phones (screens smaller than 480) will have one column.

@media (max-width: 768px){
  .x-iso-container.cols-4>.hentry {
    width: 49.95%;
  }
}

@media (max-width: 480px){
  .x-iso-container.cols-4>.hentry {
    width: 100%;
  }
}

Hope this helps. Kindly let us know.

[leannevenier]

Thanks for the response and for pointing out the extra bracket (I removed it but it didn’t change anything).

I think you misunderstood my question, though.

I actually WANT 4 columns of thumbnails to appear with MY PORTFOLIO on EVERY device (including mobile phones and tablets) – yes the thumbnails SHOULD get smaller and smaller depending on which device you’re using). And even after sorting, I still want it to show 4 columns of thumbnails on every device.

X the Theme is programmed by default to show only 1 column on mobile phones (regardless of my master settings telling it I want 4 columns) but I do NOT want 1 column on mobile (or ever). I always want a minimum of 4 columns to show on EVERY device.

I want more thumnbnails to show up on the mobile screen at the same time like the sample url above (so I want 4 columns to be the default for EVERY device). This sample url shows only 3 columns when you look on mobile. I want mine to have 4 on all devices. http://m.umbertosculpture.com/#!Sculptures

If you can provide me with the custom CSS code for each size screen so in the future, I can go in and change the number of columns if I want (in case I decide to have 4 columns for everything except the smallest mobile screen, where I might use 3 columns instead) that would be great!

Hopefully this is clearer.

Thanks for your help! (I tried out the code you provided above but it doesn’t actually change anything or override the default X settings so it doesn’t solve my issue. – I deleted it from my customize css box).

[Nabeel A]

Hi there,

Thank you for that detailed writeup! Regretfully displaying 4 columns in mobile screen would not be possible, but instead you can display upto three columns. Please add the following code in your Customizer via Appearance > Customize > Custom > CSS:

@media screen and (max-width: 979px) {
.x-iso-container.cols-4>.hentry {
    width: 33.28% !important;
}
}

Let us know how this goes!

[leannevenier]

Ok, that worked great! sort of 🙂 Thanks for the code! 3 columns on mobile is just fine!

Two new issues, though:
1. the border/frame that is around every portfolio image is set to a permanent width – ie the border is permanently set to be 2 mm, as opposed to being responsive based on the size of the thumbnail.
Ie it’s set to be the same frame/ border width- regardless of the size of the image or the device it’s being viewed on (so that even a tiny 13 mm wide thumnail has a 2 mmm wide border all around it which is 15% of the image! (that means that 4 mm of those tiny thumbanils are hollow border/frame and only 13 of the total 17 mm column/thumbnail width is image. ).

I have two possible solutions and if you can provide me with the code for both (so I can see which looks better), that would be great!

1.a) an you provide me with the CSS code that will define that border/frame to be a fixed percentage based on the width of the column housing that image, regardless of the device the porfolio is viewed on.
I would like that percentage to be a maximum 2.5%o of the width of the portfolio column/image.

For example, if the allotted column width is 80 mm for any given thumbnail (including image and border/frame), then the frame would be set to be 2.5% of 80 mm full image/column width (ie if there were no margins on the column) and the resulting image would be 76 mm wide with a border of 2 mm all the way around.

If the allotted column width is 20 mm for a smaller device whn measuring a single column, then the image would become 19 mm with a .5 mm border on all sides.

Does this make sense?

It’s simply a replacement of the code that defines that border/frame as a fixed 2 mm width to instead be a percentage of the total column/iimage width allowed for that device’s column width (as defined by the device being viewed upon)

1. b)If that’s not possible or even if it is and I can have this code as well, I would just get rid of the frame altogether so the thumbnail completely fills the allotted space within the column, regardless of the device it’s being viewed on .

So that would be Option 2 for the first issue above.
____

Second issue that becomes very problematic if you view my website now (with the code I’ve added that you gave me). You’ll see this issue if you look at this page of my website on mobile:

Portfolio: Healing Art — Takes a moment to load all images

2. With the new smaller thumbnails, that ‘white rollover title and date page’ that covers every portfolio image whenever you hover your mouse over the image, is now bleeding over onto the thumbnail image, so all you see is a tiny image with a big fat frame and a bunch of huge text covering the image when viewing on mobile.

I would REALLY love to get entirely rid of that white rollover title page altogether and just be able to click anywhere on the portfolio thumbnail image to get directed to its full page description (ie this also applies to ALL portfolio and blog posts, so if changing the code for the portfolio also changes the featured header images for the blog posts as I suspect it will, that would be fine)

I really don’t like that white-page rollover feature at all in the Renew portfolio design (in fact, I almost didn’t choose this Renew stack because of that white cover page rollover feature. The integrity infinity sign/lock sign in the portfolio design was more appealing (although I’d prefer no mouse rollover image on top of the portfolio thumnail at all), but Integrity had too much background visual clutter, shadows, etc that would have been time consuming to delete.)

I would prefer there be NO rollover page, or any lock image (as in Integrity theme) or anything other than a slight darkening of the entire image (as happens with the Buttons or hyperlinks in X the Theme (love the simpilicty of simply hovering over an image with your mouse and it getting darker to indicate your mouse is on top of it)), when you roll your mouse over a portfolio image.

If we could get rid of that rollover page altogether (the title and date at that point is superfluous) and just click anywhere on the image to go to the main page for that portfolio entry, that would be ideal!

So, here’s my request #2 (after 1a and 1b above. 🙂 )

2. Can you provide me with the code to completely get rid of that White rollover cover page, and make it so the thumbnnail image simply gets darker when the mouse is hovering over it, and when you click ANYwhere on the image, it takes you to the portfoiio detail page for that image?

Thank you for your help!!!

[Author]

Posts