Ask the community

This is a community support forum where you can ask
questions and interact with other PremiumPress Customers.

Product Image Row Increase w/Mouse-over

  • Jose
    Jose
    Newbie 29 points
    July 15, 2013 at 11:49 am

    I have an issue with the Mouse-over feature for the products pictured on the index page.

    My layout is 4 columns by 4 rows. When the Mouse-over effect occurs in a column 4 product/image (with the exception of Row 4, Column 4 item), the page length increases by 1 row.

    + 1 – 2 – 3 – 4
    1 a – b – c – d
    2 e – f – g – H
    3 i – j – k – l
    4 m – n – o – p

    So in the above diagram, if product “H” (Row 2, Column 4) is moused-over, the resultant page layout displays as diagrammed below:

    + 1 – 2 – 3 – 4
    1 a – b – c – d
    2 e – f – g – H
    3 * – * – * – i
    4 j – k – l – m
    5 n – o – p – *

    As soon as the “H” product is moused-over (or the “d” product or “i” product for that matter), it “bumps” open 3 empty product spaces in columns 1, 2 and 3.

    In the second diagram the asterisks ” * ” represent the blank spaces/empty image areas created by the mouse over. Everything is displaced by three columns, leaving one row empty, with the exception of Column 4. It also fills out the bottom row (Row 5), with three products and leaves the Row 5, Column 4 position empty.

    We have tried reducing the frame padding – and even giving it a negative value – but nothing alters the 3-frame image displacement…

    congocollection.com

  • Jose
    Jose
    Newbie 29 points
    July 15, 2013 at 12:17 pm

    The Website I am having this issue with is http://www.congocollection.com/

  • Mark Fail
    Mark Fail
    Super Guru 12,821 points
    July 15, 2013 at 2:17 pm

    here, its nothing todo with padding just the border widget, add this to your admin -> display setup -> custom css;

    [code title=””]

    [/code]

  • Jose
    Jose
    Newbie 29 points
    July 15, 2013 at 4:34 pm

    Wow Mark – What an Easy Fix! Thanks so much.

    I tried to decrease the border from 5 px to 2 px but the problem returned. Is there any way to decrease the highlighted border/box to 2 pixels without the problem rearing its ugly head…?

  • Mark Fail
    Mark Fail
    Super Guru 12,821 points
    July 15, 2013 at 4:38 pm

    you need to use both the hover and non hover value;

    ul.display li {
    border: 2px solid #3f7f00 !important;
    }

    and

    ul.display li:hover {
    border: 2px solid #3f7f00;
    }

  • Jose
    Jose
    Newbie 29 points
    July 15, 2013 at 7:45 pm

    Mark,

    I am using this code snippet – but still not working – how am I bungling this up:

    <style> ul.display li:hover {
    border: 2px solid #3f7f00;
    } </style>

    <style> ul.display li:border: {
    2px solid #3f7f00
    } </style>

    What am I missing?

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