Return to previous page

Account Page Product Images Gap…………………….

This topic has 6 replies, 3 voices, and was last updated 7 months, 1 weeks ago ago by Andrew Mitchell

Ajaz

Participant

April 7, 2024 at 17:22

Hi Luca,

The gap between the text “You may also like…” and the product images is too much, how can this be reduced to my preferences?

Thanks,
Ajaz

#390521 Copied Theme version: 9.3.4

5 Answers

Luca Rossi

Support staff

April 8, 2024 at 08:49

Hi @Ajaz,

Please add this custom CSS:


.content-product .product-content-image {
    min-height: auto;
}

Hope it helps!

#390574 Copied

Ajaz

Participant

April 8, 2024 at 09:08

Fab, that has worked but the text below the image is left aligned, how can I centre this?

#390576 Copied

Luca Rossi

Support staff

April 8, 2024 at 09:56

Hi @Ajaz,

We’ve just updated the previous CSS for your shop page a little bit to make it works on My Account page aslo:


.woocommerce-page .content-product .product-content-image,
.woocommerce-shop .content-product .product-content-image,
.woocommerce.archive .content-product .product-content-image,
.single-product .content-product .product-content-image {
    width: 300px !important; /* Adjust the width as needed */
    height: auto; !important;
    margin: 0 auto;
    overflow: hidden;
}
.woocommerce-page .content-product .products-page-cats,
.woocommerce-shop .content-product .products-page-cats,
.woocommerce.archive .content-product .products-page-cats,
.single-product .content-product .products-page-cats {
    padding-right: 0 !important;
}
.woocommerce-page .product-details .product-view-light .light-left-side,
.woocommerce-page .content-product h2.product-title,
.woocommerce-page-shop .content-product .products-page-cats,
.woocommerce-page .content-product .price,
.woocommerce-shop .product-details .product-view-light .light-left-side,
.woocommerce-shop .content-product h2.product-title,
.woocommerce-shop .content-product .products-page-cats,
.woocommerce-shop .content-product .price,
.single-product .product-details .product-view-light .light-left-side,
.single-product .content-product h2.product-title,
.single-product .content-product .products-page-cats,
.single-product .content-product .price,
.woocommerce.archive .product-details .product-view-light .light-left-side,
.woocommerce.archive .content-product h2.product-title,
.woocommerce.archive .content-product .products-page-cats,
.woocommerce.archive .content-product .price {
    text-align: center;
}
@media (max-width: 480px){
    .woocommerce-shop .content-product .product-content-image,
    .single-product .content-product .product-content-image,
    .woocommerce.archive .content-product .product-content-image {
        width: 94% !important;
    }
}

Can you please check now?

Thank you!

#390589 Copied

Ajaz

Participant

April 8, 2024 at 10:40

Fab, this has worked.

Thanks, Luca.

Topic resolved.

#390598 Copied

Andrew Mitchell

Support staff

April 8, 2024 at 10:40

Dear Ajaz,

As we continue our mission to exceed expectations, your insights become increasingly valuable. Could we, with all due respect, request your thoughtful feedback by giving our theme a deserved 5-star rating on ThemeForest?

Click here to share your valuable perspective: https://themeforest.net/downloads

Your time and trust are highly appreciated!

Best Regards,
The 8Theme Team

#390599 Copied

Tagged: account page, gap reduction, optimization, product images, required changes, woocommerce themes, wordpress
Viewing 6 results - 1 through 6 (of 6 total)