Viewing 18 posts - 1 through 18 (of 18 total)
  • Author
  • #19772


    I’m trying to have all Portfolio Thumbs grey container with the same height but if the portfolio title is too long, it goes to a second line.

    I’m ok with double line for the text, just want them to have all the same size.

    Check the sshot please:

    Thank you for helping



    Please place this on your custom.css

    .portfolio-wrap .inner-entry {
    min-height: 246px;

    Adjust the min-height value if needed. Remove browser history / cache then reload page.




    Thank you Ismael,

    The issue now is the bottom section below the excerpt, there is too much empty space. How can decrease the height here?

    Thank you


    A second question please:

    In the 3-column portfolio I see the grey section (where the title and excerpt goes) is on top of the thumbnail (portfolio item).

    Is there a way have the title and excerpt with the grey section BELOW the thumbnail so the image can be totally visible by default?

    Thank you


    Regarding issue number 1: Still need help on: How can decrease the height here?

    Regarding issue number 2: I think I figured out that title is showing below the thumbnail. It appears the problem is with the size of the thumbnail: it cuts the bottom part of it. Therefore, I would like to know how can I increase the thumb height in the 3-column portfolio? I have the 4-column working perfectly.

    Thank you


    Hi sitesme,

    Can you post a link to your site? so we can check the issue further,




    Hi Ismael,

    Please look into the website with 3-column

    Many thanks



    I see a bad url

    Please provide a url to your live website. We will need to see the code in order to help you. You can use to hide the url




    Hi Nick,

    Sorry, the URL is here:

    Thank you



    Please try adding this to custom.css , at the end of the file; or end of Quick CSS located in Choices > Theme Options > Styless .. text area on bottom of the page: .. The 47 is the height you don’t like so try something closer to 0. The -5 is the tight distance between the two texts residing between the 2 lines of text on the same area.

    #top .inner-entry .portfolio_excerpt {
    margin-top: -5px;
    min-height: 10px; /*was 47px*/
    #top .slideshow li img {
    top: -20px; /*pulls image out of its sleeve*/




    Thanks Nick,

    That fixed my first issue, but I’m still struggling with the portfolio items being cut.

    Please check this 3-column portfolio thumb: and compare the same with the 4-column layout:

    I would like to reproduce the same effect as it is in the 4-column layout: it resizes the image to the top + sides and then cut the bottom if the proportion doesn’t fit. This is how I would like to have it.

    Any thoughts on this?




    You added css after the fix i gave you which made my css invalid because of the cascade rules. But your images get cropped anyhow during the upload:

    <removed> … the edges are cut off, which means you are uploading the images in different aspect ratio then 495×400

    What width/height are those images before you upload them?

    Does every image have the same width/height as every other image on that page before you upload them?

    *Always upload images that are proportionally larger than the size they will shrink to (495×400)

    3-4 column portfolio thumbs have a constraint of 495×400 (defined in functions.php on line 69). So that means you need to either:

    (a) change the width and height on line 69 so that it proportionally matches the height and width of your images before you upload them [all images must have the same width and height, so if image1 is 600w-400h that is the size all images need to be] or

    (b) change the aspect ratio of images you are uploading to be proportional to 495×400.

    The way to do it is to take the width of your image before you upload it, and put it in a formula:

    —important formula—

    (400 * width of your images before upload) / 495 = (height your image must be so it’s proportional)

    If all your images have (for example) 992 width and 723 height before you upload them, you will need to see if that aspect ratio is proportional to 495×400 using the formula above. So take the width of your image (lets say 992) and plug it into the formula

    (400*992)/495 = height

    height = 802

    so 495×400 is proportional to 992×802, while your image is 992×723. This wont work since 723 is smaller than 802 and its easier to cut then to add 79 pixels of height to 723 to make it proportional.

    So now we see what is proportional to 495×400 if we keep the height. we use the same formula

    (400*proportional width)/495 = 723

    proportional width = ( 723 * 495 ) / 400

    proportional width = 895

    The size of the initial image is 992 width x 723 height, so all you need to do is crop 992 down to 895 using graphic software while not touching the height until you are uploading 895×723 which will perfectly scale down to 495×400 without any cropping.





    So what you would need to do is replace lines 69-70 of functions.php which look like

    $avia_config['imgSize']['portfolio'] = array('width'=>495, 'height'=>400 ,'copy'=>'greyscale');	// images for portfolio entries (2,3 column)
    $avia_config['imgSize']['portfolio_small'] = array('width'=>241, 'height'=>179 ,'copy'=>'greyscale'); // images for portfolio 4 columns

    and have them look like

    $avia_config['imgSize']['portfolio']  = array('width'=>241, 'height'=>179 ,'copy'=>'greyscale'); // images for portfolio entries (2,3 column)
    $avia_config['imgSize']['portfolio_small'] = array('width'=>241, 'height'=>179 ,'copy'=>'greyscale'); // images for portfolio 4 columns

    Just remember that this by itself will not do anything, you will need to regenerate or re-upload the images.





    the fix to not crop the thumbs was easier than I thought.

    Just replaced this code on line 32 inside loop-portfolio.php:

    case "3": $grid = 'one_third'; $image_size = 'fullsize'; break;

    Now, I just need to increase the height of the thumb area to something like the red box here:

    What CSS code controls the height there?

    Thank you



    I replied to your email about the url.


    I found the url. Your images are stil all of differnt heights, so the shorter ones look different then the taller.

    You can use this to pull images up, but they are all different height so its up to you how much you want to add there, right now this attribute is not in the code so you can try between 0px to -120px

    #top .slideshow li img {
    top: -60px;

    This controls the row height.

    .portfolio-wrap .inner-entry {
    min-height: 110px; /* current value */

    Your best bet is to install Google Developer Tools and to use them to tweak the values and then copy straight from there and just add to your custom.css ., its quite easy just time consuming.




    Hi Nick,

    I still can’t find the result I was expecting; I got the image aligned to the top of the thumb’s container, but I still don’t see the container increasing its size. This is the height I would like to see for all portfolio items (in red box):

    How can I increase the image height only on the 3-column portfolio page?

    Many thanks


    I found exactly what I want:

    The height displayed here is great and all I need…



    Oh, I didn’t know you wanted that look. Most people demand that everything is lined up and symmetrical. Personally I prefer the pinterest look like you have.

    Glad that you found what you were looking for, and I do recommend you check out that Developer Tools extension for the Google browser, it will make your day!



Viewing 18 posts - 1 through 18 (of 18 total)

The topic ‘Portfolio Thumb Container (title) height’ is closed to new replies.