Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • October 12, 2018 at 3:39 pm #1020726
    mike.rav

    Hi,

    The page below is a product category page:

    http://netinfoweb.net/tsiropoulos/product-category/gold-jewelry/

    I ve set as thumbnail page there an image with dimensions 1920px * 300px.

    I also set the below option in the category’s settings: Enfold Child Category Styling = Display product image and description as full width page banner.

    But the image is not shown properly. Only part of it is shown and it looks distorted. Can you help me with some css which will resolve my issue?

    Thank you in advance

    October 15, 2018 at 6:05 pm #1021692
    Victoria

    Hey mike.rav,

    The section that you added to the category page and the setting are two different things.

    Can you give us temporary admin access to your website in the private content box below, so that we can have a closer look?

    Best regards,
    Victoria

    October 15, 2018 at 6:09 pm #1021693
    mike.rav

    Hi,

    Thanks for replying. Sure, please find the access details below.

    Looking forward to your reply.

    Thanks again

    October 16, 2018 at 5:50 pm #1022291
    Victoria

    Hi mike.rav,

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
#av_product_description .av-parallax.avia-full-stretch.enabled-parallax  {
  height: 206px !important;
}

    If you need further assistance please let us know.

    Best regards,
    Victoria

    October 17, 2018 at 8:21 pm #1022997
    mike.rav

    Hi,

    Thanks for the css.

    But i am afraid that did not work at all.

    Instead it disappeared the image totally.

    Please have a look yourselves.

    Thank you

    October 19, 2018 at 4:23 pm #1023998
    Ismael

    Hi,

    That is how the banner is supposed to resize because it is a parallax background. You can use this css code to disable the effect and resize the background image. However, this modification may distort the image on certain screen sizes.

    #av_product_description {
    min-height: 240px;
}

#av_product_description .av-parallax {
    width: 100% !important;
    height: 100% !important;
    transform: none !important;
}

#av_product_description .av-parallax-inner.av-parallax-woo {
    background-size: 100% 100%;
}

    Best regards,
    Ismael

    October 23, 2018 at 3:32 pm #1025463
    mike.rav

    Hi,

    That worked perfectly!

    Thanks

    October 24, 2018 at 2:50 am #1025723
    Ismael

    Hi,

    Great! Let us know if you need anything else.:)

    Best regards,
    Ismael

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Product Category Image’ is closed to new replies.