Picture dimensions.

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

• This topic was modified 1 month, 1 week ago by tomis69.