Image alignment issues

  • Resolved avedislifestyle

    (@avedislifestyle)


    5 years, 7 months ago

    Hi Support,

    We have purchased imagify plugin to optimize all our product images, but after the optimization of images, we have some issues in image alignment. The 2 images displaying one below another. Kindly guide us in fixing this issue.

    Please find the screenshot: https://ibb.co/Rh0yrRN.

    Regards,
    Shabz

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

Viewing 7 replies - 1 through 7 (of 7 total)
  • Plugin Author WP Media

    (@wp_media)

    5 years, 7 months ago

    Hi @avedislifestyle

    The issue here is with WebP display. Sometimes, after activating WebP display option (using picture tags), your images might lose alignment.

    The solution is simple. You should add one of the following CSS snippet to cover all alignments to ‘<picture>’ tag:

    .alignleft {
text-align: left;
}

.aligncenter {
text-align: center;
}

.alignright {
text-align: right;
}

    You can add this code in Appearance > Customize > Additional CSS or in your (child) theme’s style.css.

    Let me know if that helps.

    Best regards
    Ioanna

    Thread Starter avedislifestyle

    (@avedislifestyle)

    5 years, 7 months ago

    Hi,

    We are still waiting for the solution. Kindly reply, please

    Thread Starter avedislifestyle

    (@avedislifestyle)

    5 years, 7 months ago

    Hi,

    We have added the same given code, but it didn’t work. Still shows the same

    Plugin Author WP Media

    (@wp_media)

    5 years, 7 months ago

    Hi @avedislifestyle

    Indeed the issue was more complex and this code below, based on our tests, will make it work.

    .main-container .shop-products .product-wrapper .product-image picture.secondary_image {
    left: 0;
    position: absolute;
    top: 0;
    z-index: 1;
    filter: alpha(opacity=0);
    opacity: 0;
}
.main-container .shop-products .product-wrapper:hover .product-image picture.secondary_image {
  filter: alpha(opacity=100);
  opacity: 1;
}

    You can contact us once it is applied so we can check it.

    Best regards

    Thread Starter avedislifestyle

    (@avedislifestyle)

    5 years, 7 months ago

    Hi,

    Thank you very much. This worked for us.

    Regards

    carwashsp

    (@carwashsp)

    5 years, 6 months ago

    i have the same issue
    carwash

    Plugin Author WP Media

    (@wp_media)

    5 years, 6 months ago

    Hey @carwashsp

    Can you tell me on which page the issue happens? Did you try the code from the previous message?

    It might be different but we need to see it in action.

    Best Regards
    Marko

Viewing 7 replies - 1 through 7 (of 7 total)

The topic ‘Image alignment issues’ is closed to new replies.