Image size in slider on detail page

This topic contains 17 replies, has 3 voices, and was last updated by  Paolo 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
  • November 17, 2016 at 11:20 am #305429

    sithonia
    Full Member
    Post count: 63

    I’m trying to adjust the size for the pictures in the slider on the detail page.

    All the photos of the listings are 800×450 px. But I can’t get the slider to show them full-size. Looking with fire-bug there is a max-height of 400 px put on, and therefore the picture never shows up full-size.

    I can’t figure out how to change the max-height to 450px. Can it be done with css, or some other way? Could you please help me?

    November 17, 2016 at 12:54 pm #305450

    Kor
    Moderator
    Post count: 16516

    Hi there,

    Do you mind sharing the URL of the site in question so we can take a look? You can use the private reply option below.

    Thanks!

    November 17, 2016 at 12:59 pm #305453

    sithonia
    Full Member
    Post count: 63
    This reply has been marked as private.
    November 17, 2016 at 1:27 pm #305454

    Kor
    Moderator
    Post count: 16516

    Hi Sithonia,

    Could you try using this custom CSS and see if it fixes the issue there ? Insert into GD > Design > Script > Custom Style CSS

    

    .geodir_flexslider .geodir-slides li img {
    max-height:100%!important;
}
    

    Thanks!
    

		
	
    


    

			
				

    

	
    

		November 17, 2016 at 1:34 pm

		
		#305461

		
		
		
	
    


    


    

	
    

		
		
    sithonia
    Full Member
    
		
		
     Post count: 63
    
	
    

	
    

		
		This reply has been marked as private.
		
	
    


    

			
				

    

	
    

		November 17, 2016 at 1:45 pm

		
		#305466

		
		
		
	
    


    


    

	
    

		
		
    Kor
    Moderator
    
		
		
     Post count: 16516
    
	
    

	
    

		
		
    Hi Sithonia, 
    

    Sorry about that, I think I targetted the wrong class. Kindly replace the code below with the one I’ve shared earlier. 
    

    

    #geodir_slider.geodir_flexslider .geodir-slides li img {
    max-height: 100%!important;
} 

    

		
	
    


    

			
				

    

	
    

		November 17, 2016 at 1:46 pm

		
		#305467

		
		
		
	
    


    


    

	
    

		
		
    Kor
    Moderator
    
		
		
     Post count: 16516
    
	
    

	
    

		
		
    Sorry, let me rephrase, I mean “Kindly replace the code I’ve shared earlier with the below.”
    

		
	
    


    

			
				

    

	
    

		November 17, 2016 at 1:50 pm

		
		#305469

		
		
		
	
    


    


    

	
    

		
		
    sithonia
    Full Member
    
		
		
     Post count: 63
    
	
    

	
    

		
		
    Thanks a lot! That looks much better! There is still a bit of size difference in the thumb nails, but it’s OK, not bothering me too much.
    

    Thanks!
    

		
	
    


    

			
				

    

	
    

		November 17, 2016 at 2:02 pm

		
		#305472

		
		
		
	
    


    


    

	
    

		
		
    Kor
    Moderator
    
		
		
     Post count: 16516
    
	
    

	
    

		
		
    Hi Sithonia, 
    

    Try adding this custom CSS code below and see if it looks better. 
    

    

    #geodir_carousel li {
    margin: 5px !important;
}
    

    Thanks!
    

		
	
    


    

			
				

    

	
    

		November 17, 2016 at 2:16 pm

		
		#305506

		
		
		
	
    


    


    

	
    

		
		
    sithonia
    Full Member
    
		
		
     Post count: 63
    
	
    

	
    

		
		
    No, that didn’t really make any difference. But I noticed another problem. On any slider with a picture in portrait view, the responsive design is broken. Sliders with landscape-view photos are fine.
    

		
	
    


    

			
				

    

	
    

		November 17, 2016 at 2:22 pm

		
		#305508

		
		
		
	
    


    


    

	
    

		
		
    Kor
    Moderator
    
		
		
     Post count: 16516
    
	
    

	
    

		
		
    Hi Sithonia, 
    

    Send over your Website WP temp admin credentials and I’ll take a better look at it. You can post the details here using the private reply option below.
    

		
	
    


    

			
				

    

	
    

		November 17, 2016 at 2:40 pm

		
		#305511

		
		
		
	
    


    


    

	
    

		
		
    sithonia
    Full Member
    
		
		
     Post count: 63
    
	
    

	
    

		
		This reply has been marked as private.
		
	
    


    

			
				

    

	
    

		November 18, 2016 at 7:19 am

		
		#305868

		
		
		
	
    


    


    

	
    

		
		
    sithonia
    Full Member
    
		
		
     Post count: 63
    
	
    

	
    

		
		
    Just to correct my previous comment. The responsive design is broken on all sliders, regardless of the picture being portrait or landscape view. But you might have noticed that already.
    

		
	
    


    

			
				

    

	
    

		November 18, 2016 at 8:03 am

		
		#305903

		
		
		
	
    


    


    

	
    

		
		
    Kor
    Moderator
    
		
		
     Post count: 16516
    
	
    

	
    

		
		
    Hi Sithonia, 
    

    I’ve just applied the custom CSS code below into your Website and it should fix the issue there. Could you please check on it? 
    

    

    @media only screen and (max-width: 480px) {
.geodir_flexslider .geodir-slides img {
    max-width: inherit!important;
}
}
    

		
	
    


    

			
				

    

	
    

		November 18, 2016 at 8:16 am

		
		#305905

		
		
		
	
    


    


    

	
    

		
		
    sithonia
    Full Member
    
		
		
     Post count: 63
    
	
    

	
    

		
		
    No, it doesn’t look good. There is a white band, a large space, between the picture and the thumbnails below.
    

		
	
    


    

			
		
	
    • 

	
  • 

		
    Author
    

		
    

			
				Posts
			
		
    

	
    • 





			



	


		Viewing 15 posts - 1 through 15 (of 18 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