Hover Box changes the height of images and wrecks the layout

  • thosrecht

    (@thosrecht)


    1 year ago

    How can I stop a Hover Box element from changing the height of the ‘front’ image that ordinarily displays when the mouse isn’t hovering?

    When I replace an Single Image element with a Hover Box element containing the same image, the result is never the same height. If there’s nothing in the Hover Block, the image gets cropped top and bottom by about 20%, so it’s short. If I add some text to the Hover Block, it zooms in and crops from the sides to keep the same width, but the resulting image height grows with each additional line of text.

    I found advice online that led me to add the following to the CSS for the page:

    .vc-hoverbox {
    max-height: 271px!important;
    min-height: 270px!important;
    }

    This worked to keep images unaltered, but the page layout still gets messed up because the Hover Box still “occupies” the same amount of screenspace as it would have if the the height hadn’t been constrained by the CSS. So whatever is below the now-properly-sized image gets pushed down the page anyway.

    Any insights would be very helpful.

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)

  • How can I stop a Hover Box element from changing the height of the ‘front’ image that ordinarily displays when the mouse isn’t hovering?

    Which specific section of your site can I see this? Or have you fixed this already?

    On your homepage, the “Photo Gallery” section is the only place I see a visible hover effect. And here the images slightly zoom-in on hover: the container size doesn’t change, and the layout remains intact.

    Thread Starter thosrecht

    (@thosrecht)

    My apologies, I gave the home page URL instead of the page I was talking about. The URL for the page is:

    https://lakedems.org/elected-officials-new-tr-231021

    On the current version of the page, I cloned the first row of photos into row 2 and am testing changes there (the left-most photo of row 2 remains a Single Image). The page now has the CSS modification so the Hover Box images are displaying properly in the 2nd, 3rd and 4th columns of row 2. However, note that the name/title text is no longer just below the photo anymore for these 3, but seems to drop down apparently based on how much text is in the Hover Block.

    I also noticed another problem after I wrote my post here. When I look at this page on my cellphone browser, all the Hover Box images are cropped top and bottom and are only around 2/3rds as tall as they should be.

    Thank you for replying. Let me know if there’s anything else you like to see.

    • This reply was modified 1 year ago by thosrecht.
Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Hover Box changes the height of images and wrecks the layout’ is closed to new replies.

Tags