Images on shop pages overlapping on zoom

[bestfitbybrazil]

Ok on my shop page for https://sandbox.bestfitbybrazil.com/product-category/shopallproducts/  if you press the custom “Hide Filters” button on right side it will hide all widget filters from view and expand products size WITHOUT crowding them on title and price area.  You can still see titles and pricing.  But on my live site https://bestfitbybrazil.com/product-category/shopallproducts/ when you press button and products expand they cover over titles and prices.  The titles and prices.  Can you help me fix this?  i’m not sure what needs to be tweaked on live.  i could not find the difference between live and sandbox site.  but i’m sure its in the css somewhere?

Also the reason this seemed to have broken in the first place is i put some css in to accomplish keeping the products closer together and making the filter column less wide, so images could be maximized with 4 in a row.  I remove the code as best I remember it and still the price and title are getting covered up when “hide filtets” is pressed.  Its a toggle button by the way.  Here’s a pic of what i would like the shop page images to look like without over crowding titles and pricing when i press “Hide Filter” button.

[Harry]

Hi,

I see different CSS below

.product-image.pr {
	position: relative !important;
	margin-top: 0px !important;
	display: block !important;
}

Please try remove this code

Kind regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[bestfitbybrazil]

Ok i removed this from live site but the code below is on both sites for mobile view and still does not work on live site.

@media only screen and (max-width: 768px) {.product-image.pr {
position: relative !important;
margin-top: 0px !important;
display: block!important;
}
}

[Harry]

Please remove code for only desktop view

@media only screen and (min-width: 769px) {
.product-image.pr {
	position: relative !important;
	margin-top: 0px !important;
	
}}

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[bestfitbybrazil]

I did remove it.  there are no references to desktop view

[Harry]

Hi,

I check your site the code still there, please remove and refresh browser to check again, not check remove with inspect tool.

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[Harry]

Please check the code in Claue > Theme Option > General Layout > Custom CSS

Kind regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[bestfitbybrazil]

This is my custom css on live and the code is not there

@media only screen and (min-width: 75em) {
body.page:not(.home) .jas-container {
width: calc(100% – 30px);
}
}
.sidebar .widget.yith-woocommerce-ajax-product-filter ul li:before {
content: none;
}
.sidebar .widget.yith-woocommerce-ajax-product-filter ul li {
padding-left: 0;
}
.product-image-flip img {
width: 100%;
}
.countdown-time {
bottom: 105px;
}
.jas-my-account {
color: #fff;
}
.jas-icon-cart {
color: #fff;
}
.product-countdown .product-info {
white-space: normal;
width: calc(100% – 40px);
}
.jas-sc-instagram .item img {
object-fit: cover;
height: 210px;
width: 300px;
}
.header__search {
color: #fff;
}

.term-description p {
margin: 15px auto;
max-width: 1024px;
text-align: center;
width: 100%;
}

.jas-currency {
color: #fff;
}
.jas-my-account ul {
z-index: 1000;
background: rgba(0, 0, 0, 0.95);
}
.jas-currency ul {
z-index: 1000;
display: none;
}
.jas-currency:hover ul {
display: block;
}
.ubermenu .ubermenu-item.ubermenu-item-12999>.ubermenu-target:hover {
background: #fff;
}
.header-sticky .header__mid {
box-shadow: none;
background: none;
}
.jas-wc-single > .bgbl, .product_meta .posted_in, .product_meta .tagged_as{ display: none;}

.product-inner .product-image {
border: 1px solid #dedede;
}

@media only screen and (max-width: 736px) {
.jas-action .sf-open { display: block;}
}
.woocommerce-checkout .slick-dots {display: none;}

.archive #wowslider-container12 {max-width: 1280px;}
.archive #wowslider-container63 {max-width: 1024px;}
.archive #wowslider-container24 {max-width: 1024px;}
.archive #wowslider-container25 {max-width: 1024px;}
.archive #wowslider-container26 {max-width: 1024px;}
.archive #wowslider-container28 {max-width: 1024px;}
.archive #wowslider-container29 {max-width: 1024px;}
.archive #wowslider-container91 {max-width: 1024px;}
.archive #wowslider-container114 {max-width: 1024px;}
.archive #wowslider-container41 {max-width: 1024px;}
.archive #wowslider-container49 {max-width: 1024px;}
.archive #wowslider-container77 {max-width: 1024px;}
.archive #wowslider-container67 {max-width: 1110px;}
.archive #wowslider-container74 {max-width: 1024px;}
.archive #wowslider-container125 {max-width: 1024px;}
.archive #wowslider-container128 {max-width: 1024px;}
.archive #wowslider-container98 {max-width: 1024px;}
.archive #wowslider-container100 {max-width: 1024px;}
.archive #wowslider-container116 {max-width: 1024px;}
.archive #wowslider-container121 {max-width: 1024px;}
.product-image:hover a .container-image-and-badge {opacity: 0; visibility: hidden;}
.product-image:hover .product-image-flip .container-image-and-badge a.back {opacity: 1; visibility: visible;}
.product-image .product-image-flip > .container-image-and-badge {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}

.product-btn {
top: auto;
bottom: -50px;
left: 0;
-webkit-transform: translate(0,0);
transform: translate(0, 0);
width: 100%;
background: rgba(255,255,255,.85);
}
.product-image:hover .product-btn {
top: auto;
bottom: 25px;
}
.btn-quickview.cd.br__40.pl__25.pr__25.bgw.tc.dib {
background: none;
text-transform: uppercase;
color: #222;
}

@media screen and (max-width: 800px) {
.product-btn {background: none;}
}

.product-image .yith-wcwl-add-button a {
opacity: 1;
visibility: visible;

padding: 4px 2px 3px;
}

.product-quickview .yith-wcbm-badge { display: none; }
.mfp-bg { z-index: 9999;}

.wc-col-switch.flex::before {
content: “VIEW”;
margin-right: 10px;
}

.page-numbers {
margin: 6px 0;
}

.page-numbers li {
float: left;
margin: 0 1px 0 0;
color: #fff;
border: none;
padding: 0;
border-radius: 0;
}
.page-numbers li a,
.page-numbers li span {
color: #fff !important;
background: #222;
padding: 5px 12px;
}
.page-numbers li a:hover,
.page-numbers li span.current {
background: #e640e6;
}

.yith-woocommerce-ajax-product-filter.with-checkbox ul {
list-style-type: none;
padding: 10px !important;
border: 1px solid #ddd;
box-shadow: 0px 0px #888888;
}

.woocommerce ul.products li.product .price {
font-size: 14px;
}

@media only screen and (min-width: 736px) { .filter-trigger {display: none;}}

.filter-trigger .fa-sliders::before {
content: “\f002″;
}

@media only screen and (min-width: 75em) {
body.woocommerce-checkout .jas-container, body.woocommerce-cart .jas-container {
width: 73.125rem !important;
}
}
.term-description {display: block;}

@media only screen and (max-width: 1024px) {
.btn-quickview, .product-image a.db::before { display: none;}
.product-btn {background: none !important;}
.yith-wcwl-add-to-wishlist ~ .product-btn { display: none;}
.product-image .product-image-flip a {z-index: 1;}
}

.product-image-flip .back {
position: absolute !important;
}

@media only screen and (max-width: 736px) { .jas-my-account {
display: block;
}
.jas-action > * {
padding: 0 2px;
}
}
.is-color .swatch__value {
width: 60px;
height: 60px;
line-height: 60px;
border-radius: 0;
}
.is-color .swatch__list–item {
border-radius: 0;
}

.product-btn {
background: rgba(255,255,255,.15);
}
.product-image a.db::before {
display: none;
}

.swatch .swatch__list–item.is-selected .swatch__tooltip {
top: -33px;
opacity: 0;
visibility: hidden;
}

.menu-opened .jas-canvas-menu {
background: #bb1e39;
}

.ubermenu-responsive-toggle .fa{
float:right;
margin:0;
font-size:20px;
padding:5px 0;
}

.product-image .product-image-flip a {
position: relative;
z-index: 99;
}

.product-image .yith-wcwl-add-to-wishlist {
z-index: 100;
}

.product-image .product-image-flip a {
z-index: 1;
}

.product-image .yith-wcwl-add-button a {
color: #D8D8D8;
}

.product-image .yith-wcwl-add-button a:hover {
color: #FF0040;
}

.price .woocommerce-variation-availability {display: none;}

/* color menubar black. transparency would not stop showing so this code helped */
.header-sticky .header__mid {
box-shadow: none;
background: black;
}

/* fixes menu bar on cellphone and desktop to show 1 bar level on scroll when theme set to sticky */
@media only screen and (min-width: 1025px) {
.header-sticky .header__mid .jas-row {
display: none;
}}

.header__top {
padding: 0px 15px;
}

.header__mid {
padding: 0px 15px;
}

.header__mid .jas-row {
padding: 0px 15px;
}

.jas-action i {
font-size: 20px;
}
@media only screen and (min-width: 1026px) {
.jas-currency {
margin: 0px 0 0px 10px;
}}

.jas-ajax-load a {
background-color: #58D3F7;
color: #fff;
}

@media only screen and (max-width: 736px) {
.footer__top {padding: 0;}
.footer__top div[class*=”jas-col”]:not(:last-child) {
margin-bottom: 0;
}}

.pr.pe-7s-angle-up {
color: #fff;
}

html { overflow-x: hidden;}

.single-product-thumbnail .slick-slide > a {
display: inline-block;
}

@media only screen and (max-width: 768px) {
.single-product-thumbnail .slick-slide img.zoomlmg {
display: none;
}
}

[Harry]

Hi,

I see problem because the live site use loadmore pagination while on staging use number pagination.

Please turnoff loadmore pagination on live site.

Kind regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[bestfitbybrazil]

Yup that was the problem.  hmm so there’s no way to run “load more” and keep that from happening?

[Harry]

Hi,

I’m sorry the loadmore option use javascript to generate position of products, when you click hide it not update position of products so it overlay the text.

Kind regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[Author]

Posts