Return to previous page

Ajax product tab layout problem not of equal lenght

This topic has 4 replies, 2 voices, and was last updated 16 hours, 46 minutes ago ago by Tony Rodriguez

Misbah Badshah

Participant

November 11, 2024 at 11:05

i have added ajax product tab and it’s working okay but the problem is that the layout is not equal

#422743 Copied Theme version: 9.4.4

3 Answers

Tony Rodriguez

Support staff

November 11, 2024 at 12:05

Hello, @Misbah Badshah,

Thank you so much for purchasing our theme and contacting our support center.

Please add the next custom CSS code in XStore > Theme Options > Theme custom CSS > Global CSS

.main-products-loop .product, .products-loop .product, .carousel-area .product-slide .product {
    display: flex;
    justify-content: center;
}
.products-loop .ajax-content, .products-loop {
    display: flex;
    flex-wrap: wrap;
    flex: 1;
}
.content-product {
    flex-direction: column;
    justify-content: space-between;
    display: flex;
    flex: 1;
}
.content-product .quantity-wrapper {
    margin-right: auto;
    margin-left: auto;
}
.swiper-container {
    display: flex;
    align-items: stretch;
}
.product-slide .product {
    display: flex;
    height: 100%;
}
.swiper-wrapper {
    height: auto;
}

We hope this helps. Should you require any further assistance, please do not hesitate to reach out. We are here to help you.

Best regards,
8Theme’s Team

#422748 Copied

Misbah Badshah

Participant

January 8, 2025 at 08:41

I added it but the layout is still not equal it does happen on my shop page so please guide me
I added it but the layout is still not equal it does happen on my shop page so please guide me

#429833 Copied

Tony Rodriguez

Support staff

January 8, 2025 at 11:27

Hello, @Misbah Badshah,

Thank you for your response.

Kindly edit the page with Elementor> Edit specific widget > Style > select product title limit as 1 and update it.

Additionally, Please add the next custom CSS code in XStore > Theme Options > Theme custom CSS > Global CSS

/* Allign products */
.main-products-loop .product, .products-loop .product, .carousel-area .product-slide .product {
    display: flex;
    justify-content: center;
}
.products-loop .ajax-content, .products-loop {
    display: flex;
    flex-wrap: wrap;
    flex: 1;
}
.content-product {
    flex-direction: column;
    justify-content: space-between;
    display: flex;
    flex: 1;
}
.content-product .quantity-wrapper {
    margin-right: auto;
    margin-left: auto;
}
.swiper-container {
    display: flex;
    align-items: stretch;
}
.product-slide .product {
    display: flex;
    height: 100%;
}
.swiper-wrapper {
    height: auto;
}
.content-product .product-image-wrapper {
    margin-bottom: 10px;
}
.products-grid .product-excerpt {
    min-height: 42px;
}

/* Allign product carousel */
.elementor-widget-etheme_product_carousel .swiper-container {
    display: flex;
    align-items: stretch;
}
.swiper-slide  .product {
    display: flex;
    flex-wrap: wrap;
    height: 100%;
}
.elementor-widget-etheme_product_carousel .swiper-slide .etheme-product-grid-content {
    align-self: flex-end;
		width: 100%;
}

/* For home page sliders allign*/
.products-slider .content-product {
    flex-direction: column;
    justify-content: space-between;
    display: flex;
    flex: 1;
}
.products-slider.swiper-container {
    display: flex;
    align-items: stretch;
}
.product-slide .product {
    display: flex;
    height: 100%;
}
.products-slider .swiper-wrapper {
    height: auto;
}

/* Allign cross-upsell products*/
.elementor-widget-etheme_product_grid .etheme-product-grid-item {
    display: flex;
    flex-wrap: wrap;
}

We hope this helps. Should you require any further assistance, please do not hesitate to reach out. We are here to help you.

Best regards,
8Theme’s Team