disproportionate pictures
-
hi, the product pictures in my store are very disproportionate.
I want it to be as in picture 1 in the attached file
Is this possible ? or can you offer a different solution?
Also in the third picture, it appears in different sizes. What is the reason for this?
thank you 🙂
Attachments:
You must be
logged in to view attached files.
Hello,
Unfortunately, Currently I am unable to see all your screenshots. Please attach the screenshots correctly with the URL of the website to check it myself and help you out accordingly.
Best Regards.
problem solved
I used this code
.woocommerce ul.products li.product .woocommerce-LoopProduct-link > :not(:first-child) {
margin-top: 0;
}
.product-grid-item{
background:#fff;
border-radius:5px;
margin:10px;
box-shadow:0 0 5px rgba(0,0,0,0.1);
padding-bottom:15px;
padding-top:15px;
}
.product-image-link{
position: relative;
padding-top: 100%;
overflow: hidden;
border:1px solid #eee;
}
.product-grid-item .hover-img img, .product-grid-item .product-image-link img{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
display: block;
max-width: 100%;
max-height: 100%;
object-fit:contain;
}
.woodmart-tab-content .product-grid-item.col-md-3{
flex: 0 1 calc(20% – 20px);
}
.product-grid-item.col-md-3{
flex: 0 1 calc(25% – 20px);
}
.product-grid-item.col-md-4{
flex: 0 1 calc(33% – 20px);
}
@media (max-width:600px){
.product-grid-item.col-md-4,
.woodmart-tab-content .product-grid-item.col-md-3,
.product-grid-item.col-md-3{
flex: 0 1 calc(50% – 20px);
}
}
Hello,
We are Glad that you resolved the issue by yourself. You are Great!!
Let us know if there’s anything else we can do for you! You can always reach us at any time. We are always here to help you.
Have a wonderful day.
Topic Closed.
Best Regards.
The topic ‘disproportionate pictures’ is closed to new replies.