Hello.
I found little issue causing big problem for esthetic look. Trying to find solution since few days but i do not understand what is happening. I made few changes in listing page: contact seller and contact details has removed – that is all. Now when i adding 2 new listings with photo dimensions: 933×635 and 960×640 they look very good but when i adding 2 more listings with 960×720 pictures and 1920×1272, thumbnails in “Listing showcase” are higher than other 2 ( 960×720 and 1920×1272 are higher). Once i open listings with 933×635 and 960×640 photos they look nice but in listings with 960×720 and 1920×1272 pictures are lower and and missing top and bottom part of piccture. below you will find all plugin settings.
All what i need is to make always pictures in the same size and if dimensions will be bigger or smaller they will always fit to the same size box as i do not want to manualy change dimensions every time when i will add new listing. The same size should be in Listing showcase widget and also listing page.
I tried to use plugins like “Resize Image After Upload” to make sure that pictures using the same size they would not be higher but without luck…
Listing showcase widget
https://pasteboard.co/6wVzcxetX5r2.jpg
Edit Listing Showcase settings in Elementor
https://pasteboard.co/qx7enhSJ7Rds.jpg
Classified Listing settings
https://pasteboard.co/77CGhiPZNmss.jpg
Listing 1920×1272 (look at missing top and bottom parts)
https://pasteboard.co/J9lcUi5RZU3x.jpg
Listing 933×635 (perfect fit)
https://pasteboard.co/oerwzC7sgby7.jpg
Used CSS:
.swiper-button-next {
background-color: #F9C34982;
border-radius: 50%;
width: 60px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
transition: background-color 0.3s ease;
}.swiper-button-prev:hover {
background-color: #F9C349;
}
.swiper-button-prev {
background-color: #F9C34982;
border-radius: 50%;
width: 60px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
transition: background-color 0.3s ease;
}
.swiper-button-next:hover {
background-color: #F9C349;
}
.rtcl-responsive-img {
max-width: 800px;
max-height: 500px;
min-height: 500px;
object-fit: contain;
margin: 0 auto
}
.post-navigation .nav-links {
visibility: hidden;
}
.rtcl-slider-nav {
margin-top: 30px;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
padding: 0 5px;
box-sizing: border-box;
}
.rtcl-slider-thumb-item {
width: auto;
height: 150px;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
margin-right: 5px;
}
.rtcl-slider-thumb-item:last-child {
margin-right: 0;
}
.rtcl-slider-thumb-item img {
width: auto;
height: 100%;
object-fit: cover;
display: block;
}
.rtcl-slider-video-thumb img {
width: auto;
height: 100%;
object-fit: cover;
}
select[name="orderby"] {
display: none;
}
#page {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.admin-bar #page{
min-height: calc(100vh - 32px);
}
#page .site-content{
flex-grow: 1
}
@media (max-width: 768px) {
.rtcl-slider-item img {
width: 100%;
height: auto;
.rtcl-slider-video-item iframe {
width: 100%;
height: auto;
}
.rtcl-slider-wrapper {
overflow: hidden;
}
.swiper-button-next, .swiper-button-prev {
width: 30px;
height: 30px;
}
}
Best regards,
Tom
