How to increase “single image container” size in product page?

  • Resolved samuelmartin

    (@samuelmartin)


    6 years, 8 months ago

    Hi Forum:

    I can’t work out how to make the featured product image and gallery (single image container) in my products’ pages larger than the default size given by storefront. The featured image size is currently too small. I tried the following

    .single-product div.product .images {
    width: 45.1764705882%;
    float: left;
    margin-right: 5.8823529412%;
    margin-bottom: 3.706325903em;
    }

    But this messes up the display of the wooswipe gallery plugin I am using, and also the mobile display of wooswipe.

    I then tried the following

    .single-product-main-image {
    width: 118%;
    }

    .thumbnails {
    margin-top: 0px;
    margin-right: -40px
    }

    This works fine in the desktop version, but totally messes up the wooswipe gallery plugin in mobile devices.

    Can anyone help me, please? I’d like to increase the size of the single image container by 10-15% (from the default woocommerce storefront size) without affecting the responsive mobile version.

    Lastly, is there any way, when in mobile devices horizontal, to make the single image container to expand to fill the width of the screen? At the moment it does not and I am at a loss as to how to get it done…

    Your help would be immensely appreciated.

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

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

    (@jessepearson)

    Automattic Happiness Engineer

    If you wrap your rules in a media query like this one, they will only affect screens larger than 768pc wide:

    @media (min-width: 768px) {
//rules here
}

    Regarding the single image container when a device is in landscape mode, it could be possible, but the images used would be smaller than device widths in that fashion. I am unsure of how many users use their phone in landscape versus portrait mode, but I would have to believe it’s a small amount.

    jessepearson

    (@jessepearson)

    Automattic Happiness Engineer

    We haven’t heard back from you in a while, so I’m going to mark this as resolved – if you have any further questions, you can start a new thread.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘How to increase “single image container” size in product page?’ is closed to new replies.