WordPress.org

Ready to get started?Download WordPress

Forums

WooCommerce - excelling eCommerce
[resolved] Photo layout on products page issue (7 posts)

  1. James
    Member
    Posted 2 years ago #

    Hi, can anyone help please?

    On my products page there is the main product image plus smaller additional images in rows of three below the main image. I have a total of 7 images for a product - the main large one, plus two rows of three smaller ones underneath.

    For example:
    http://www.matchlessclueless.com/store/lucas-564-leds/lucas-564-led-12v/

    My problem is with the spacing between the two roes of smaller images, or rather the lack of spacing! There is a small gap (horizontally and vertically) between all the other photos, but no horizontal spacing between these two rows which spoils the layout.

    Is this a WooCommerce or theme issue?

    I have the latest versions of everything installed (i.e. WP 3.4, WooComm 1.5.7.1 and the theme is Striking 5.1.8.2).

    Thanks in advance, James :)

    http://wordpress.org/extend/plugins/woocommerce/

  2. ZjanPreijde
    Member
    Posted 2 years ago #

    Hi James,
    Try this in CSS:
    img.attachment-shop_thumbnail {margin-bottom:5px;}

    http://wordpress.org/extend/plugins/woocommerce/

  3. ZjanPreijde
    Member
    Posted 2 years ago #

    Or this in CSS:

    div.thumbnails a {
        float: left;
        margin-right: 3.8%;
        margin-bottom: 3.8%;
        width: 30.75%;

    Hope this helpt, grtz, Zjan

    http://wordpress.org/extend/plugins/woocommerce/

  4. James
    Member
    Posted 2 years ago #

    Thank you Zjan!

    That was exactly what I needed, very much appreciated :)

    Your first suggestion above worked a treat (I didn't need to try the second). I just posted this into the custom css box in the Striking theme 'General' setting page, cleared the cache and problem solved. I just increased the margin slightly to 10px to match the others around the same thumbnail and now it's perfect.

    Cheers, James

  5. ZjanPreijde
    Member
    Posted 2 years ago #

    That's why I thought the second solution was slightly more original, the original CSS was

    div.thumbnails a {
        float: left;
        margin-right: 3.8%;
        width: 30.75%;

    Adding

    margin-bottom: 3.8%;
    would make it more consistent.

    Glad I could help

  6. ZjanPreijde
    Member
    Posted 2 years ago #

    I meant slightly more elegant :-)

  7. James
    Member
    Posted 2 years ago #

    Ah, I see what you mean. But with limited css knowledge I went with what looked the simplest / shortest option first!

    Thanks again :)

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic