[Resolved] Too much open space between the image and the content

[metcomllc@aol.com]

There is too much open/blank space between the image and the content on the single product pages. https://www.tryhypnosisnow.com/hypnosis-downloads/product/stop-smoking-pot/. Pleasre assist me with this issue.

[Leo]

Hi there,

It shouldn’t be like this by default and I can’t quite tell why it’s like this.

Can you disable all plugins except GP Premium and WooCommerce for us to take another look?

[metcomllc@aol.com]

I did that before I reached out to you.

[Leo]

Can you please do that again for us to see?

Please start a staging site if this is a live site with traffic as well – we haven’t received other reports on this so further debugging is likely required.

[metcomllc@aol.com]

I have no idea how to create a staging site. I am not a coder.

[David]

Hi there,

i assume the Niche site was imported from the Site Library at some point.
As it has some of the custom code that Niche uses, particularly what allowed the Stacked Gallery to be displayed.
This assumes that a produce would have more than one image. If that is not the case then go to Customizer > Additional CSS and look for this CSS rule:

@media (min-width: 768px) {
    .woo-gallery-stack {
        grid-column: 1;
        grid-row: 1/3;
    }
}

See this line: grid-row: 1/3;
Change it to: grid-row: 1;

That should remove the additional space.

[metcomllc@aol.com]

That definitely helped. Please take a look at these 2 different single product pages.

This page still has space, although not nearly as much, between the image and content.
https://www.tryhypnosisnow.com/hypnosis-downloads/product/find-your-passion-and-purpose/

While this page has no space between the image and content.
https://www.tryhypnosisnow.com/hypnosis-downloads/product/forgive-your-mother/

[Leo]

Can you disable Autopimize so I can see the custom CSS you’ve added?

If you don’t want the same style as Niche then most of them should be removed.

[metcomllc@aol.com]

/* GeneratePress Site CSS */ /*-- Navigation --*/

.main-navigation {
    box-shadow: 0 2px 2px -2px rgba(0, 0, 0, .2);
}

.navigation-search {
    background-color: #fff;
}

/*--- Off Canvas Panel ---*/
/* Off Canvas Panel Widget styling */
.slideout-widget.woocommerce ul li {
    line-height: 2em;
    display: grid;
    grid-template-columns: 0 90% 10%;
}

.slideout-navigation .slideout-widget ul.product-categories li {
    grid-template-columns: 90% 10%;
}

.slideout-widget:not(:first-of-type) {
    border-top: 1px solid #ccc;
    padding-top: 2em;
}

/*=== WOOCOMMERCE ===*/
/*--- SINGLE PRODUCT ---*/

/* Stacked Gallery for desktop and sticky summary */

@media (min-width: 768px) {
    .woocommerce-product-gallery {
        display: none;
    }

    .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;
    }

    .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;
    }

    .single-product span.onsale {
        position: absolute;
        top: 0;
    }
}

/* Add some space above price tag */
.woocommerce div.product p.price,
.woocommerce div.product span.price,
.woocommerce div.product p.price ins {
    margin-top: 10px;
}

/* Breadcrumn and post meta styling */
.product_meta>span,
.woocommerce-breadcrumb {
    text-transform: uppercase;
    font-size: 12px !important;
    font-weight: 500;
}

.woocommerce div.product div.summary .woocommerce-breadcrumb {
    margin-bottom: 40px;
}

/*--- SHOP AND ARCHIVE ---*/

.woocommerce ul.products li.product.sales-flash-overlay .onsale {
    left: 0;
    right: auto;
}

.woocommerce-ordering:after {
    right: 25px;
    top: 8px;
}

/* Position Filter breadcrumb results and ordering */
.woo-filter-toggle,
.woocommerce.archive .woocommerce-breadcrumb {
    padding: 10px 0;
    margin-right: 20px;
    float: left;
    font-size: 14px !important;
    font-weight: 500;
    line-height: 20px;
}

.woo-filter-toggle a {
    color: #000;
}

.main-navigation ul li.slideout-toggle {
    display: none !important;
}

.woocommerce .woocommerce-result-count {
    float: right;
    margin-right: 20px;
}

.woocommerce-ordering select {
    text-transform: uppercase;
    max-width: 200px;
    border: 0;
}

.woo-filter-toggle a:before {
    padding-right: 2px;
    position: relative;
    top: 1px;
}

/* Woo category nav */

.woo-cat-nav {
    list-style-type: none;
    margin-left: 0;
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 80px;
}

.woo-cat-nav li {
    padding: 5px 0;
    margin: 0 10px;
    border-bottom: 1px solid #ccc;
    font-size: 0.95em;
    text-transform: uppercase;
}

@media (max-width: 768px) {
    .woocommerce .woocommerce-result-count {
        display: none;
    }

    #wc-column-container .product {
        margin-bottom: 2em;
    }

    .woo-cat-nav {
        margin-bottom: 40px;
    }

    h1.woocommerce-products-header__title,
    .term-description {
        text-align: center;
    }

    .woo-cat-nav {
        justify-content: center;
    }
}

/* Shop Product Styling */

/* Reduce Grid Gap */
.wc-columns-container .products,
.woocommerce .related ul.products,
.woocommerce .up-sells ul.products {
    grid-gap: 20px;
}

/* Remove add to cart styling */
.woocommerce ul.products li.product a.button {
    padding: 5px 0;
    color: inherit;
    background-color: #ffffff;
    text-transform: uppercase;
}

/* Transform add to cart and pricing on hover */
@media (min-width: 768px) {

    .woocommerce ul.products li.product a.button {
        transform: translateY(0);
        width: 100%;
        opacity: 0;
        transition: all 0.4s;
    }

    .woocommerce ul.products li.product:hover a.button,
    .woocommerce ul.products li.product:hover .price {
        transform: translateY(calc(-100% - 10px));
        opacity: 1;
    }

    .woocommerce ul.products li.product .price {
        opacity: 1;
        transition: all 0.4s;
    }

    .woocommerce ul.products li.product:hover .price {
        opacity: 0;
        transform: translateY(calc(-100% - 10px));
    }
}

/* Woocommerce Tabs */

.woocommerce-tabs h2 {
    display: none;
}

@media (min-width: 768px) {

    .slideout-navigation .main-nav {
        display: none;
    }

}

/* Category Shortcode Hover effect */
.product-category .wc-product-image .inside-wc-product-image {
    overflow: hidden;
}

.product-category .wc-product-image img {

    transition: all 0.3s;
}

.product-category .wc-product-image:hover img {
    transform: scale(1.1);
    transition: all 0.3s;
}

.site-logo, img.header-image {
    width: 90%; height: 50%;
}
#mobile-header img { width: 100%; height: auto; }

.mobile-site-logo img.header-image {
    width: 100%;
}
.product_meta a {
    color: #1a006b;
}
.woocommerce .cart button[name="update_cart"] {
    display: none;
}
h2.woocommerce-loop-category__title {
    color: #c42d00;
}
 /* End GeneratePress Site CSS */

[David]

This comes back to that custom layout from the Niche Site.
For that layout to work with the sticky summary, it requires CSS Grid, and CSS grid likes things to be of a uniform size.
Things like the Image Aspect Ratio or the summary text, be the same across products.

For example this products Image has a more appropriate aspect ratio for that layout:

https://www.tryhypnosisnow.com/hypnosis-downloads/product/forgive-your-mother/

If all images were that aspect ratio and the summaries were of similar length then the spacing would be the same across products.

[metcomllc@aol.com]

Thank you

[Author]

Posts