Tagged: ,

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • August 18, 2021 at 2:06 pm #1317343
    sitibus

    Hello I have a problem with the image size that is displayed on Woocommerce. As you can see at the url https://www.toysanarchy.com/product/tenebris/ the rotating image that is displayed does not occupy all the available space but looking at the code only 41%. This does not happen when using one of the default themes (Twenty-one). How is this possible? Can you help me please? Thanks Gianluca

    August 18, 2021 at 2:40 pm #1317345
    sitibus

    Hi I update the post because in the meantime the Woocommerce support helped me with the following code:

    / ** Switch width / height 100% due to image ratios being wrong for full screen: 4230548-zen * /
    #main .threesixty .threesixty_images img.current-image {
    max-height: 95vh;
    height: 100%;
    margin: 0 auto;
    width: auto;
    }

    / ** Force width of 360 image container to 100% as theme conflict fix: 4230548-zen * /
    #main # container.wc360-container {
    width: 100%;
    }

    But now I need that the part where the description is to be full width is it possible?

    Thanks Gianluca

    August 21, 2021 at 6:41 pm #1317744
    Mike

    Hi,
    Thank you for your patience and the link to your single product sample, as I examine it the description side of the page is already full width except for the 50px of padding, so to remove this padding please try this css:

    #top.single-product #main > .container_wrap_first.template-shop > .container {
	padding: 0;
}

    Please see the screenshot in the Private Content area to show what I’m seeing.

    Best regards,
    Mike

    August 23, 2021 at 4:40 am #1317866
    sitibus

    I don’t think I’ve made myself clear. I was wondering if it was possible to have the description section full width as it would be in the case of the default theme. I am attaching screenshots to clarify my expectations:

    August 25, 2021 at 1:36 pm #1318286
    Mike

    Hi,
    Thanks for the feedback and the screenshots, please try this css:

    #top.single-product #main > .container_wrap_first.template-shop .single-product-main-image {
    width: 100%;
    float: none;
}

    This also makes the product image full width, if you want it to stay at 33% similar to your screenshot, then remove the line width: 100%;
    After applying the css, please clear your browser cache and check.

    Best regards,
    Mike

    October 21, 2021 at 11:56 am #1325844
    sitibus

    Hello I would like if possible that the image on the left and the textual content on the right each occupy 50% of the page size as in the image that I am attaching at https://www.toysanarchy.com/wp-content/uploads/2021/10/image-50-50.png, is it possible?
    Thanks Gianluca

    October 21, 2021 at 1:31 pm #1325868
    Mike

    Hi,
    You can control the width of the image container with this css:

    #top.single-product .single-product-main-image {
    width: 50%;
}

    this sets the remaining page width for the product summary container, but please note that the gallery below the product summary is also in the product summary container so it’s width is also changed and may be undesirable.
    So you can try adjusting the image width to find an image width & summary/gallery width that you are ok width.
    Don’t forget to clear your cache while you are testing.

    Best regards,
    Mike

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.