Size of list-image changing depending on page

This topic contains 13 replies, has 3 voices, and was last updated by  Rafaela 6 years, 1 month ago.

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

Open Support Ticket
  • Author
    Posts
  • January 18, 2019 at 4:45 am #463835

    Rafaela
    Full Member
    Post count: 131

    Hi guys,

    The problem is that the list image displays differently depending on which list the object is in.
    Please see screenshots.
    Especially the box Popular Places or Latest Places just looks awful.

    I have tried the following:
    .geodir-post-img .geodir_thumbnail.geodir_lazy_load_thumbnail {
    height: 118px !important;
    width: 164.17px !important;
    }

    but I just can’t get this to work.

    The list image looks perfect when I search for category but when I search by city its smaller?!
    See attached screenshots on when I search for city first with the Latest Places box and the second screenshot and when I search by category “dogpark”.

    Thanks!

    Rafaela

    January 18, 2019 at 4:47 am #463838

    Rafaela
    Full Member
    Post count: 131
    This reply has been marked as private.
    January 18, 2019 at 5:53 am #463850

    Guust
    Moderator
    Post count: 29970

    You have set the sidebar for Places and categories at 30% and for search at 40%:
    GD > Design.
    Set both to 40%.
    Thanks

    January 18, 2019 at 6:10 am #463857

    Kor
    Moderator
    Post count: 16516
    This reply has been marked as private.
    January 21, 2019 at 2:10 am #464353

    Rafaela
    Full Member
    Post count: 131
    This reply has been marked as private.
    January 21, 2019 at 2:13 am #464356

    Rafaela
    Full Member
    Post count: 131
    This reply has been marked as private.
    January 21, 2019 at 7:25 am #464380

    Kor
    Moderator
    Post count: 16516

    Hi Rafaela,

    Thanks for your reply. You should set both Listing and Search Sidebars the same width so that the images looked the same size.

    If you wish to have the images display full size, you’ll need to apply the custom CSS code below into your Website. 

    

    .geodir_category_list_view li .geodir-post-img .geodir_thumbnail {
    background-size: contain!important;
}
    

		
	
    


    

			
				

    

	
    

		January 22, 2019 at 4:02 am

		
		#464578

		
		
		
	
    


    


    

	
    

		
		
    Rafaela
    Full Member
    
		
		
     Post count: 131
    
	
    

	
    

		
		
    Hi Kor,
    

    Thanks so much!!
    
The combination of the CSS and being consistent with the Listing and Search Sidebars fixed the issue of the listing image in the list.
    

    The Css also now displays the full image on the Popular/ Lastest Places box but it still looks a bit dodgy. The “New” flag is only half there and the arrow to move to the next listing is not in the middle.
    
Obviously a minor detail, but would you have any ideas what causes this?
    

    Thanks 🙂
    

		
	
    


    

			
				

    

	
    

		January 22, 2019 at 7:41 am

		
		#464593

		
		
		
	
    


    


    

	
    

		
		
    Kor
    Moderator
    
		
		
     Post count: 16516
    
	
    

	
    

		
		
    Hi Rafaela, 
    

    Thanks for your reply. That’s controlled by your theme. Usually, this falls outside of our support scope but I’ll help you just this time. The code below will allow you to move the position of the arrows. 
    

    

    #secondary .widget.geodir_event_listing .flocks_geodirectory_owl_carousel .owl-nav, #secondary .widget.geodir_bestof_widget .flocks_geodirectory_owl_carousel .owl-nav, #secondary .widget.geodir_related_listing_post_view .flocks_geodirectory_owl_carousel .owl-nav, #secondary .widget.geodir_popular_post_view .flocks_geodirectory_owl_carousel .owl-nav, #site-footer-widgets.site-footer-section .widget.geodir_event_listing .flocks_geodirectory_owl_carousel .owl-nav, #site-footer-widgets.site-footer-section .widget.geodir_bestof_widget .flocks_geodirectory_owl_carousel .owl-nav, #site-footer-widgets.site-footer-section .widget.geodir_related_listing_post_view .flocks_geodirectory_owl_carousel .owl-nav, #site-footer-widgets.site-footer-section .widget.geodir_popular_post_view .flocks_geodirectory_owl_carousel .owl-nav, #geodir-sidebar .widget.geodir_event_listing .flocks_geodirectory_owl_carousel .owl-nav, #geodir-sidebar .widget.geodir_bestof_widget .flocks_geodirectory_owl_carousel .owl-nav, #geodir-sidebar .widget.geodir_related_listing_post_view .flocks_geodirectory_owl_carousel .owl-nav, #geodir-sidebar .widget.geodir_popular_post_view .flocks_geodirectory_owl_carousel .owl-nav, #geodir-sidebar-left .widget.geodir_event_listing .flocks_geodirectory_owl_carousel .owl-nav, #geodir-sidebar-left .widget.geodir_bestof_widget .flocks_geodirectory_owl_carousel .owl-nav, #geodir-sidebar-left .widget.geodir_related_listing_post_view .flocks_geodirectory_owl_carousel .owl-nav, #geodir-sidebar-left .widget.geodir_popular_post_view .flocks_geodirectory_owl_carousel .owl-nav, #geodir-sidebar-right .widget.geodir_event_listing .flocks_geodirectory_owl_carousel .owl-nav, #geodir-sidebar-right .widget.geodir_bestof_widget .flocks_geodirectory_owl_carousel .owl-nav, #geodir-sidebar-right .widget.geodir_related_listing_post_view .flocks_geodirectory_owl_carousel .owl-nav, #geodir-sidebar-right .widget.geodir_popular_post_view .flocks_geodirectory_owl_carousel .owl-nav {
    top: 40%;
}
    

		
	
    


    

			
				

    

	
    

		January 23, 2019 at 1:14 am

		
		#464825

		
		
		
	
    


    


    

	
    

		
		
    Rafaela
    Full Member
    
		
		
     Post count: 131
    
	
    

	
    

		
		
    Thanks Kor!!!
    

    Much appreciate the extra effort :-))
    

		
	
    


    

			
				

    

	
    

		February 15, 2019 at 12:33 am

		
		#469038

		
		
		
	
    


    


    

	
    

		
		
    Rafaela
    Full Member
    
		
		
     Post count: 131
    
	
    

	
    

		
		
    Hi Kor, 
    

    I have just picked this up again, as I did not notice one issue the following CSS is causing:
    
.geodir_category_list_view li .geodir-post-img .geodir_thumbnail {
    
    background-size: contain!important;
    
}
    

    As per GD recommendation all our images are 800×600 and if I display them in full, then it seems the “allocated” space does not line up.
    
This can be particularly seen well in the Features image as the background is a different colour.
    
You can also see that the New tab is not in the correct space with the image, I am assuming this is a GD setting?
    

    Is this a problem with our Theme or was our decision to use 800×600 images wrong? It almost looks like an image with a higher width to height ratio would have been better for the display in the lists?
    

    As we are planning to upgrade to V2 later in the year, will this still be the same problem?
    

    Thanks,
    
Rafaela 
    

		
	
    


    

			
				

    

	
    

		February 15, 2019 at 12:34 am

		
		#469041

		
		
		
	
    


    


    

	
    

		
		
    Rafaela
    Full Member
    
		
		
     Post count: 131
    
	
    

	
    

		
		This reply has been marked as private.
		
	
    


    

			
				

    

	
    

		February 15, 2019 at 7:49 am

		
		#469103

		
		
		
	
    


    


    

	
    

		
		
    Kor
    Moderator
    
		
		
     Post count: 16516
    
	
    

	
    

		
		
    Hi Rafaela, 
    

    Thanks for your reply. Just inspected your Website and I think I know what you mean there. Let’s try giving some paddings the container and see if it looks nice. 
    

    

    .widget .geodir_category_list_view > li, #related_listingTab .geodir_category_list_view > li, #geodir-main-content .geodir_category_list_view > li {
    max-width: 100%;
    border-bottom: 1px solid #eee;
    padding: 15px 10px 30px 10px;
}
    

		
	
    


    

			
				

    

	
    

		February 23, 2019 at 6:58 am

		
		#470741

		
		
		
	
    


    


    

	
    

		
		
    Rafaela
    Full Member
    
		
		
     Post count: 131
    
	
    

	
    

		
		
    Hi Kor,
    

    Thanks!!!
    

    Don’t ask me why, but the following worked and achieved the attached result:
    

    .widget .geodir_category_list_view > li, #related_listingTab .geodir_category_list_view > li, #geodir-main-content .geodir_category_list_view > li {
    
    max-width: 100%!important;
    
    border-bottom: 1px solid #eee!important;
    
    padding: 10px 140px 30px 10px!important;
    
}
    

    140px seems a lot but and I am not really sure how this can work, but it somehow does.
    

    Thanks again!
    

    Rafaela 
    

		
	
    


    

			
		
	
    • 

	
  • 

		
    Author
    

		
    

			
				Posts
			
		
    

	
    • 





			



	


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