Modifying appearance of map bubble

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

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

Open Support Ticket
  • Author
    Posts
  • February 15, 2019 at 11:49 am #469128

    Andrew
    Expired Member
    Post count: 197

    Hi,

    I’d like to increase the height of the map bubbles to fit in the image as well as all content within it, however can’t seem to find the appropriate element in CSS to modify (screenshot attached).

    Any help is appreciated!
    Andrew

    February 15, 2019 at 2:29 pm #469166

    Alex Rollin
    Moderator
    Post count: 27815

    Please share a link to the page

    February 15, 2019 at 10:05 pm #469307

    Andrew
    Expired Member
    Post count: 197

    https://www.getaboutable.com/search/?geodir_search=1&stype=gd_outdoors&spost_category%5B%5D=71&simpairment%5B%5D=&s=+&snear=&sgeo_lat=&sgeo_lon=

    February 16, 2019 at 5:42 am #469357

    Kor
    Moderator
    Post count: 16516

    Hi Andrew,

    Ok, let’s try removing the padding and increasing the height using the custom CSS code below. Does it look better?

    

    .gm-style .gm-style-iw-c {
    padding: 0px!important;
    height: 300px!important;
}
    

		
	
    


    

			
				

    

	
    

		February 16, 2019 at 5:53 am

		
		#469359

		
		
		
	
    


    


    

	
    

		
		
    Andrew
    Expired Member
    
		
		
     Post count: 197
    
	
    

	
    

		
		
    Hi Kor, that looks to have helped the issue … although certain map bubbles don’t look great due to the difference in image sizes and differences in the amount of content included within the map bubble.
    

		
	
    


    

			
				

    

	
    

		February 17, 2019 at 2:31 pm

		
		#469500

		
		
		
	
    


    


    

	
    

		
		
    Kor
    Moderator
    
		
		
     Post count: 16516
    
	
    

	
    

		
		
    Hi Andrew, 
    

    Maybe we can use the custom CSS code below to set a fixed height and in “Cover” mode?
    

    

    .geodir-images  img {
   width:100%!important;
    height:200px!important;
    object-fit: cover!important;
}
    

		
	
    


    

			
		
	
    • 

	
  • 

		
    Author
    

		
    

			
				Posts
			
		
    

	
    • 





			



	


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