Product Image Row Increase w/Mouse-over

WordPress Business Themes Forums Version 7 Themes ShopperPress Product Image Row Increase w/Mouse-over

Product Image Row Increase w/Mouse-over

July 15, 2013
Jose Jose
  • Jose
    Jose
    Newbie 29 points

    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

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

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

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

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

    [code title=””]

    [/code]

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

    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…?

    July 15, 2013 at 4:34 pm
  • Mark Fail
    Mark Fail
    Super Guru 12,812 points

    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;
    }

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

    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?

    July 15, 2013 at 7:45 pm
Viewing 6 posts - 1 through 6 (of 6 total)

Didn't find what you were after?

Chat with us now

or contact our support team