Archived topic
Product Gallery Issue
1 reply · Started by Usman on June 22, 2022
Viewing posts 1–2 of 2
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
Hi there,
go to Appearance > Elements and delete ( or Quick Edit > Change Status: Draft ) these 2 elements:
Gallery Stack
Close Summary Wrap
This archived topic is closed to new replies.