portfolio grid – light box larger than image

  • Resolved fastfasterfastest

    (@fastfasterfastest)


    9 years, 9 months ago

    I am using Virtue 2.4.0, free version.
    I have deactivated my child theme to verify the issue is not caused by the child theme (the screenshots referenced below are done with just Virtue 2.4.0 activated, not any child theme).

    I have a portfolio grid page that displays 4 portfolio items. Depending on the size of the browser window, sometimes the light boxes (hope I am using the correct term) are bigger than the images. This is especially noticeable because I am using a non-white background for the content area.

    The size of the featured images of the portfolio items are all 648×432 (same ratio as 1200×800, by the way).
    The portfolio grid page’s options are set as:
    – Columns: Four Column
    – Set image height: 179
    – Add Lightbox link in the top right of each item: Yes

    My site is not publicly accessible at this time, but I have made screenshots of the issue.

    – https://www.tiikoni.com/tis/view/?id=da80dbd
    Here the browser is sized so 3 columns of images/portfolio items are used. The light boxes are nice and same size as the featured images of the portfolio items.

    – https://www.tiikoni.com/tis/view/?id=2160c5c
    Here the browser is sized so 2 columns of images/portfolio items are used. This illustrates the issue – the light boxes wider than the featured images of the portfolio items.

    I don’t know what causes this issue. On Kadence’s demo page at https://themes.kadencethemes.com/virtue/portfolio/gallery/ the grid appears to be configured to use “square images”, and perhaps that is why the issue doesn’t seem to replicate on that page. However, I would prefer to have the images using the same aspect ratio as the original images (if possible).

    Any hints on why this happens?
    Can I “fix” this in my child theme?

Viewing 6 replies - 1 through 6 (of 6 total)
  • Thread Starter fastfasterfastest

    (@fastfasterfastest)

    Actually, the issue CAN be seen on https://themes.kadencethemes.com/virtue/portfolio/ as well.

    Make the browser window narrow enough so the images/portfolio items display in 1 column. Then the light box on the images will be wider than the images. This is easiest to observe, of course, if you first set the background color to something non-white.

    You can use this css. 

    .portfolio_item {
max-width: 366px;
margin-left: auto;
margin-right: auto;
}

    Kadence Themes

    actually because you are using the four column it would be this:

    .portfolio_item {
max-width: 269px;
margin-left: auto;
margin-right: auto;
}

    Kadence Themes

    Thread Starter fastfasterfastest

    (@fastfasterfastest)

    Great, thanks!

    (To be ok with any future changes I might do in my grid page, I think I will handle all 5 cases with:

    .tcol-md4 > .portfolio_item {
max-width: 366px;
margin-left: auto;
margin-right: auto;
}
.tcol-md3 > .portfolio_item {
max-width: 269px;
margin-left: auto;
margin-right: auto;
}
etc.

    )

    For now, I can specify this css, but this should perhaps/probably be done by the Virtue css, yes? If so, I can remove “my” css when Virtue does it in a future version.

    (An alternative, instead of setting max-width on .portfolio_item, I guess would be to make the image little bigger, increasing the $slidewidth values passed to aq_resize. Then instead of the space between the images/columns being increasing, the images would just “grow” larger.)

    Hey,
    I added the css to the theme right after I posted here, it’s in the 2.4.1 update.

    Kadence Themes

    Thread Starter fastfasterfastest

    (@fastfasterfastest)

    Thanks – excellent!

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘portfolio grid – light box larger than image’ is closed to new replies.

Tags