40% OFF EVERYTHING
BLACK FRIDAY SALE
Buy Now

Listing Carousel Widget Frame

This topic contains 14 replies, has 2 voices, and was last updated by  Jeffrey Williams 7 years, 11 months ago.

We have moved to a support ticketing system and our forums are now closed.

Open Support Ticket

Tagged: 

  • Author
    Posts
  • December 4, 2016 at 11:51 pm #318817

    Jeffrey Williams
    Buyer
    Post count: 72

    Hello,

    When displayed as a carousel, images in the CPT Listing Widget have different dimensions. Is there a setting to ensure they all have the same dimensions?

    See snapshot for example of the issue.

    Thanks for the help!

    December 5, 2016 at 5:45 pm #319309

    Paolo
    Site Admin
    Post count: 31206

    Hi,

    please try this CSS:

    

    .geodir_flexslider .geodir-slides > li {
    max-height: 150px;
}
    

    You should add it to GeoDirectory >> Design >> Scripts >> Custom CSS. 
    

    Let us know how it goes,
    

    Thanks
    

		
	
    


    

			
				

    

	
    

		December 5, 2016 at 11:58 pm

		
		#319472

		
		
		
	
    


    


    

	
    

		
		
    Jeffrey Williams
    Buyer
    
		
		
     Post count: 72
    
	
    

	
    

		
		
    Hi @paolo
    

    Thanks for the code! However, instead of sizing the GD Listing Carousel, it adjusted the Photo Slider on the Details page of the listing.
    

    How should I tweak the code so it applies to the right element?
    

    Thanks for the help!
    

		
	
    


    

			
				

    

	
    

		December 6, 2016 at 12:04 am

		
		#319475

		
		
		
	
    


    


    

	
    

		
		
    Paolo
    Site Admin
    
		
		
     Post count: 31206
    
	
    

	
    

		
		
    try:
    

    

    
#geodir_widget_slider .geodir-slides > li {
    max-height: 150px;
}
    

    Thanks
    

		
	
    


    

			
				

    

	
    

		December 6, 2016 at 12:12 am

		
		#319487

		
		
		
	
    


    


    

	
    

		
		
    Jeffrey Williams
    Buyer
    
		
		
     Post count: 72
    
	
    

	
    

		
		
    Nope, looks the same as the last snap shot. Cleared my cache to make sure.
    

		
	
    


    

			
				

    

	
    

		December 6, 2016 at 12:18 am

		
		#319489

		
		
		
	
    


    


    

	
    

		
		
    Jeffrey Williams
    Buyer
    
		
		
     Post count: 72
    
	
    

	
    

		
		
    Now that I look at it, it appears that some of the pics in the dummy data have thumbnails smaller that 150px. So while your code limits how big the pics are, if some thumbnails are smaller that 150px, the display still looks uneven. Is there a way to force all thumbnails to be minimum and maximum of 150px?
    

    Thanks!
    

		
	
    


    

			
				

    

	
    

		December 6, 2016 at 3:43 pm

		
		#320060

		
		
		
	
    


    


    

	
    

		
		
    Paolo
    Site Admin
    
		
		
     Post count: 31206
    
	
    

	
    

		
		
    Hi,
    

    the css I gave seems to be working, to make it work for that dummy image too you need to reduce it to 140px:
    

    

    #geodir_widget_slider .geodir-slides > li {
    max-height: 140px;
}
    

    There is no other way to solve this, other than trying to use images with the same size ratio.
    

    Thanks
    

		
	
    


    

			
				

    

	
    

		December 6, 2016 at 7:37 pm

		
		#320183

		
		
		
	
    


    


    

	
    

		
		
    Jeffrey Williams
    Buyer
    
		
		
     Post count: 72
    
	
    

	
    

		
		
    Hi @paolo
    

    Upon further testing, the code is not working. In order to test it, I changed the max-height to 50px, so it would be obvious that it either worked, or not.
    

    There was no change (see attached snapshot)
    

    Waiting for your reply.
    

    Thanks for all your help.
    

    Cheers.
    

		
	
    


    

			
				

    

	
    

		December 6, 2016 at 8:06 pm

		
		#320202

		
		
		
	
    


    


    

	
    

		
		
    Paolo
    Site Admin
    
		
		
     Post count: 31206
    
	
    

	
    

		
		
    Hi Jeffrey
    

    I tested that code and it was working just fine. Please provide credentials and I’ll apply it for you.
    

    Thanks
    

		
	
    


    

			
				

    

	
    

		December 6, 2016 at 8:23 pm

		
		#320211

		
		
		
	
    


    


    

	
    

		
		
    Jeffrey Williams
    Buyer
    
		
		
     Post count: 72
    
	
    

	
    

		
		This reply has been marked as private.
		
	
    


    

			
				

    

	
    

		December 7, 2016 at 4:56 pm

		
		#320732

		
		
		
	
    


    


    

	
    

		
		
    Paolo
    Site Admin
    
		
		
     Post count: 31206
    
	
    

	
    

		
		
    HI,
    

    You copy and pasted the CSS with wrong formatting.
    

    You have :
    

    

    
#geodir_widget_slider .geodir-slides & gt ; li {
    max-height: 50px;
}
    

    (& gt ; without spaces )
    
instead of :
    

    

    
#geodir_widget_slider .geodir-slides > li {
    max-height: 140px;
}
    

    I tried to correct it, but it’s not saving the new information and I have no idea why…
    

    Let me know if you can save it correctly.
    

    Thanks
    

		
	
    


    

			
				

    

	
    

		December 12, 2016 at 12:03 am

		
		#323406

		
		
		
	
    


    


    

	
    

		
		
    Jeffrey Williams
    Buyer
    
		
		
     Post count: 72
    
	
    

	
    

		
		
    Hi @paolo
    

    Circling back to this.
    

    I took the time to upgrade my account with my host. Move it from a shared server to a Cloud Server.
    

    The good news is that it solved many issues, including saving your code so the carousel frame displays correctly.
    

    However, the bad news is it doesn’t work on mobile. If you look at the carousel on desktop, it works perfect, but take a look at it on mobile.
    

    Is there a way to fix it?
    

    Thanks!
    

		
	
    


    

			
				

    

	
    

		December 12, 2016 at 5:25 pm

		
		#323762

		
		
		
	
    


    


    

	
    

		
		
    Paolo
    Site Admin
    
		
		
     Post count: 31206
    
	
    

	
    

		
		
    I repeat, using images all with the same ratio would be better.
    

    otherwise you may need this too:
    

    

    @media screen and (max-width: 480px) {
#geodir_widget_slider .geodir-slides>li {
    max-height: 125px;
}}

    

    Let me know,
    

		
	
    


    

			
				

    

	
    

		December 16, 2016 at 12:45 am

		
		#325498

		
		
		
	
    


    


    

	
    

		
		
    Jeffrey Williams
    Buyer
    
		
		
     Post count: 72
    
	
    

	
    

		
		
    Hi @paolo
    

    Circling back to this.
    

    Yes, I agree that using images all with the same ratio would be better, but getting every single user to post an ad that way, is not realistic. People just want to upload their photo and expect to work. We both know that.
    

    So, it’s incumbent for the platform to be user friendly, otherwise people simply won’t use it, and we’re all wasting our time.
    

    I’ll try the code.
    

    Cheers my friend! 
    

		
	
    


    

			
				

    

	
    

		December 16, 2016 at 1:10 am

		
		#325502

		
		
		
	
    


    


    

	
    

		
		
    Jeffrey Williams
    Buyer
    
		
		
     Post count: 72
    
	
    

	
    

		
		
    UPDATE TO MY LAST REPLY
    

    Almost worked, but still displays uneven. Thanks for trying. I really appreciate it! 🙂
    

    Like to make a suggestion that future GD updates includes a setting where Admin can force all carousel images to display the same predefined size. I’ve used carousels like that in that past, so I know it’s possible. 🙂
    

    Thanks for all the great work!
    

    Cheers.
    

		
	
    


    

			
		
	
    • 

	
  • 

		
    Author
    

		
    

			
				Posts
			
		
    

	
    • 





			



	


		Viewing 15 posts - 1 through 15 (of 15 total)
	


	


		
	





		
				

			

				

					
We have moved to a support ticketing system and our forums are now closed.

					Open Support Ticket
				

			

		

		
	
	


			

			


		
	


		

	

	


















	
	
			
			
			
			
                        
            
            
                
                

                    

                        20% Discount Offer
                        
                        
                    

                    

                        Hurry! Get your 20% discount before it expires.
                        Get 20% Discount