- This topic has 10 replies, 3 voices, and was last updated 3 years, 2 months ago by
metcomllc@aol.com.
-
AuthorPosts
-
February 11, 2023 at 11:27 am #2529718
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.
February 11, 2023 at 1:08 pm #2529800Leo
StaffCustomer SupportHi 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?
February 11, 2023 at 1:53 pm #2529839metcomllc@aol.com
I did that before I reached out to you.
February 11, 2023 at 3:41 pm #2529906Leo
StaffCustomer SupportCan 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.
February 11, 2023 at 4:09 pm #2529914metcomllc@aol.com
I have no idea how to create a staging site. I am not a coder.
February 12, 2023 at 5:03 am #2530213David
StaffCustomer SupportHi 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.
February 12, 2023 at 12:07 pm #2530629metcomllc@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/February 12, 2023 at 2:32 pm #2530719Leo
StaffCustomer SupportCan 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.
February 12, 2023 at 6:18 pm #2530867metcomllc@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 */February 13, 2023 at 2:49 am #2531174David
StaffCustomer SupportThis 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.
February 14, 2023 at 11:38 am #2533337metcomllc@aol.com
Thank you
-
AuthorPosts
- You must be logged in to reply to this topic.