Questions by the type of the catalog tiled.

1. When you hover the button, the pop-up window does not fit.
2. The height of the blocks is different. Depends on text and image. This is not very beautiful. It is necessary that the blocks were of equal height.
3. How to set up a border? I need to change the color and color when hovering. And other parameters.

Try to add the following code snippet to the Custom CSS area in Theme Settings to fix this issues.

.grid-columns-4 .woodmart-hover-tiled .woodmart-tooltip-label {
	font-size:10px;
	letter-spacing: 0px;
	padding: 0 12px;
}

.woodmart-hover-tiled .product-title {
	max-height: 54px;
	height: 54px;
	overflow: hidden;
}

.woodmart-hover-tiled .product-wrapper {
	border: 1px solid rgba(0,0,0,.05);
	transition: border .3s;
	-webkit-transition : border .3s;
}

.woodmart-hover-tiled:hover .product-wrapper {
	border: 1px solid rgba(0,0,0,.25);
}

Regards

AND…

Attachments:

You must be logged in to view attached files.

Sorry not those pictures. I just need to fix this.

Attachments:

You must be logged in to view attached files.

and …

Attachments:

You must be logged in to view attached files.

1. Your specific design requires the use of images of the same size. Most of your products have the same ratio (https://dhmoto.ru/wp-content/uploads/7bde9101ee58a71f9b3b6abbb0061234.jpeg) while the product image you have shown looks different (https://dhmoto.ru/wp-content/uploads/e0c8478f9b71da1b97bb741d0962ca0f.jpeg).

2. We checked your site and the product names look normal on the resolution that you specified (https://gyazo.com/2647b3ba6e04a646247574d8c1fd30b3). Please specify, on what page or what device you noticed this issue.

Regards

Thank. But IF on hover image – border BUG.

Attachments:

You must be logged in to view attached files.

and add sku?

Attachments:

You must be logged in to view attached files.

It seems to work correctly on your website now https://gyazo.com/e5aa5e087670fffcd8b64790166e67eb
As for the SKU, we answered you in another topic that there is no such option in our theme.

This part of the code does not work = (

div.woodmart-hover-tiled div.product-wrapper {
	border: 1px solid rgba(0,0,0,.05);
	transition: border .3s;
	-webkit-transition : border .3s;
}

I figured it out. Everything is working. Can I show my code to you for verification?

Do you want us to check the CSS code? Does it work in general? Yes, you can put it here and we will take a look.

ok, thank you very much! Yes, he is working

.woodmart-social-icons.icons-design-colored .woodmart-social-icon.social-vkontakte a {
	background-color: #507299; }
div.category-grid-item .category-title {
	font-size: 16px !important; }
div.categories-style-masonry-first .category-grid-item:first-child .category-title {
	font-size: 24px !important; }
.cat-design-default .category-title {
	color: white!important;
	background: #0054ac;
	padding: 3px 7px; }
#billing_country_field {
	display: none; }
#shipping_method {
	text-align: left; }
body #shipping_method input.shipping_method {
	position: relative;
	top: 4px;
	float: left;
	margin-right: 3px;
	margin-left: 0; }
.callto-btn > a,
.callto-btn > i {
	color: white!important; }
div.search-by-category .input-dropdown-inner > a {
	max-width: 190px;
	white-space: nowrap;
	text-overflow: ellipsis;
    overflow-x: hidden;	}
div.sticky-header.act-scroll .site-logo img {
	padding-top: 5px;
	padding-bottom: 5px;
}
td.product-stock-status {
min-width: 130px; }
td.product-price {
min-width: 85px; }
td.product-subtotal {
min-width: 95px; }

.grid-columns-4 .woodmart-hover-tiled .woodmart-tooltip-label {
	font-size:10px;
	letter-spacing: 0px;
	padding: 0 12px;
}

.product-grid-item .woodmart-product-brands-links {
margin-bottom: 0;
}
.product-element-bottom .price {
position:absolute;
bottom:10px;}

div.woodmart-hover-tiled div.product-element-bottom {
position:relative;
height: 125px;
max-height: 125px;
}
div.woodmart-hover-tiled h3.product-title {
	max-height: 54px;
	margin-bottom: 3px;
	font-size: 14px;
	overflow: hidden;
}
div.woodmart-hover-tiled div.woodmart-product-brands-links {
	font-size: 14px; }

div.woodmart-hover-tiled div.product-wrapper {
	border: 1px solid rgba(0,0,0,.05);
	transition: border .3s;
	-webkit-transition : border .3s;
}

div.woodmart-hover-tiled:hover div.product-wrapper {
	border: 1px solid rgba(0,83,171,.50);
}

@media (min-width: 1024px) {
.header-base .search-button {
	display:none; }
div.sticky-header .main-nav {
	-webkit-box-ordinal-group:2;
	    -ms-flex-order:1;
	        order:1;
	-webkit-box-flex:1;
	    -ms-flex:1 0 0px;
	        flex:1 0 0; }
div.sticky-header .site-logo {
	-webkit-box-ordinal-group:3;
	    -ms-flex-order:2;
	        order:2; }
div.sticky-header .right-column {
	-webkit-box-ordinal-group:4;
	    -ms-flex-order:3;
	        order:3;
	-webkit-box-flex:1;
	    -ms-flex:1 0 0px;
	        flex:1 0 0; }
div.sticky-header .main-nav .menu {
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: start; }
}

@media (max-width: 461px) {
div.categories-style-masonry-first .category-grid-item:nth-last-child(2)  {
	margin-top: 21px;
	}
}

@media (max-width: 991px) {
div.categories-style-masonry-first .category-grid-item:first-child .category-title {
	font-size: 18px !important; }
}

@media (max-width: 767px) {
div.categories-style-masonry-first .category-grid-item:first-child .category-title {
	font-size: 16px !important; }
div.category-grid-item .category-title {
	font-size: 14px !important; }
}
@media (max-width: 1024px) {
	.topbar-content .topbar-right-text {
		display: none;
	}

	.topbar-content .top-bar-right {
		position: absolute;
		top: -900px;
		overflow: hidden;
	}

	.topbar-content .top-bar-left, 
	.topbar-content .topbar-left-text {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
	}
}
@media (max-width: 1199px) and (min-width: 1024px) {
div.main-nav .item-level-0.callto-btn {
	margin-right: 0px; }
div.main-nav .menu > .item-level-0.callto-btn > a {
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 8px;
	padding-bottom: 8px;
	font-size: 12.5px; }
div.main-nav .menu > .menu-item > a {
	font-size: 12.5px; }
div.main-nav .menu > .menu-item:last-child > a {
	padding-right: 0px;
	padding-left: 0px; }
div.menu-text-widget ul.main-nav-style {
	font-size: 12.5px; }
div.menu-text-widget ul.main-nav-style > .inline-list li {
	padding-right: 10px;
	padding-left: 10px; }
}
@media (max-width: 1199px) and (min-width: 1025px), (max-width: 560px) {
div.woodmart-hover-tiled div.product-element-bottom {
height: 120px;
max-height: 120px;
padding-top: 10px;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 10px;}
}
@media (width: 480px){
div.product-labels.labels-rectangular span.product-label {
    min-width: 50px; }
div.product-labels.labels-rectangular span.product-label:not(:last-child) {
      margin-bottom: 10px; }
div.labels-rectangular span.product-label {
    font-size: 12px;
    padding: 5px 10px; }
div.woodmart-hover-tiled h3.product-title {
	font-size: 14px !important;
}
div.woodmart-hover-tiled div.woodmart-product-brands-links {
	font-size: 14px !important; }
div.woodmart-hover-tiled span.price {
	font-size: 15px !important; }
}
@media (max-width: 479px) and (min-width: 414px) {
div.woodmart-hover-tiled div.product-element-bottom {
height: 112px;
max-height: 112px; }
div.woodmart-hover-tiled h3.product-title {
	max-height: 45px; }
}
@media (max-width: 413px) and (min-width: 360px){
div.woodmart-hover-tiled div.product-element-bottom {
height: 104px;
max-height: 104px; }
div.woodmart-hover-tiled h3.product-title {
	max-height: 39px;
	font-size: 10px !important; }
div.woodmart-hover-tiled div.woodmart-product-brands-links {
	font-size: 10px !important; }
}
@media (max-width: 359px) {
div.woodmart-hover-tiled div.product-element-bottom {
height: 96px;
max-height: 96px; }
div.woodmart-hover-tiled h3.product-title {
	max-height: 33px;
	font-size: 9px !important; }
div.woodmart-hover-tiled div.woodmart-product-brands-links {
	font-size: 9px !important; }
}

Yes, it should be correct so you can use it.

[Author]

Posts