[Resolved] Product Lay-Out Broken on Niche Template

[Hendry]

Hi there,

My product lay-out is broken when i am using niche template.

i also have set product images but it does not appear.

But it works just fine in mobile devices.

What should i do to fix it?

View post on imgur.com

[David]

Hi there,

Niche uses a Hook Element to add Stacked Image gallery.
It looks like you disabled that.

Do you want the stacked gallery on desktop? If so re-enable the Hook element.
Then add this PHP snippet to your site:

add_filter( 'generate_hooks_execute_php', '__return_true' );

https://docs.generatepress.com/article/adding-php/

OR If you want the normal carousel as its on mobile then go to Customizer > CSS and delete this:

.woocommerce-product-gallery {
    display: none;
}

[Hendry]

i have deleted the code you mention above, the images do appear now.

but when i scroll the page down, the lay-out still broken.

[David]

Ok – now delete this CSS:

.woo-sumamry-wrap {
    display: grid;
    grid-template-columns: 60% 40%;
    grid-template-rows: auto;
    margin-bottom: 80px;
}

.woo-gallery-stack {
    grid-column: 1;
    grid-row: 1 / 3;
}

.woo-gallery-stack img {
    margin-bottom: 20px;
}

.woocommerce-tabs {
    grid-column: 1;
}

.woocommerce div.product div.summary {
    grid-column: 2;
    grid-row: 1;
    margin-left: 80px;
    position: -webkit-sticky;
    position: sticky;
    top: 105px;
    bottom: 100px;
    padding-right: 80px;
}

[Hendry]

Okay, it works. Thank you David!

[David]

You’re welcome

[Author]

Posts