[Support request] Product Gallery Issue

[Usman]

Hey everyone,

I am facing product gallery issues at: https://urwears.co/product/flying-ninja/

The CSS in above site is:

/* Webinsights Follow Buttons */
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css");

.web-insights {
    text-align: right;
    display: table;
    border: 0px solid #ddd;
    padding: 0px 1px;
    border-radius: 100px;
		width:100%;
	margin:0;
	
}

.web-insights .fttl {
    font-size: 18px;
    font-weight:600;
	letter-spacing: 1px;
	color:black;border-bottom: 1px solid #ddd;
	padding-bottom:12px;
}

.web-insights .ffttl {
   font-size: 16px;
   
	letter-spacing: 0.5px;
	color:black;border-bottom: 1px solid #ddd;
	padding-bottom:15px;
	margin-top:-15px;

}

.web-insights ul{
    padding: 0px;
    margin: 0px;
	margin-left:15px;
}
.web-insights li {
    float: left;
    list-style: none;
    font-size: 20px;
    text-align: center;
    margin-right:8px;
}
.web-insights li a i {
    background-color: #f1f1f1;
    color: #fff;
    border-radius: 30%;
    height: 40px;
    width: 40px;
    line-height: 43px !important;
}
.web-insights li a i:hover{
    opacity: 0.8;
}
.web-insights li a i.fa.fa-facebook {
    background-color: #3b5997;
}
.web-insights li a i.fa.fa-whatsapp {
    background-color: #25D366;
}
.web-insights li a i.fa.fa-instagram {
    background-color: #3e729a;
}
.web-insights li a i.fa.fa-paper-plane {
    background-color: #1DA1F2;
}
.web-insights li a i.fa.fa-youtube-play {
    background-color: #c42f2b;
}
.web-insights li a i.fa.fa-twitter {
    background-color: #57aced;
}
.web-insights li a i.fa.fa-pinterest-p {
    background-color: #cb2026;
}

/* End of Webinsights Follow Buttons */
/* GeneratePress Site CSS */ /*-- Navigation --*/

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

/*--- 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 */

/* 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 .wc-columns-container .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;
	}
	
	.woocommerce ul.products li.product a.button {
		margin-right: unset !important;
		padding: 10px 0;
	}
}

/* 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: 769px) {
	.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: 769px) {
	.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;
} /* End GeneratePress Site CSS */

I want to make it look like: https://kaptaanchappal.com/peshawar-zalmi-chappal-black/

I will be thankful.

Looking Forward.
Usman

[David]

Hi there,

go to Appearance > Elements and delete ( or Quick Edit > Change Status: Draft ) these 2 elements:

Gallery Stack
Close Summary Wrap

[Author]

Posts