Mobile Map

This topic contains 5 replies, has 2 voices, and was last updated by  Kor 5 years, 10 months ago.

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

Open Support Ticket

Tagged: 

  • Author
    Posts
  • June 18, 2018 at 10:37 pm #435395

    Drew Tumlinson
    Free User
    Post count: 19

    The map is not mobile-friendly on the main page. Is there a fix for this that I can use or do I need to code it all myself?

    June 19, 2018 at 1:09 am #435402

    Kor
    Moderator
    Post count: 16516

    Hi Drew,

    Thanks for your post. We can use custom CSS code to adjust that. If you could share your Website URL here, I will provide some CSS code for you. Feel free to use the private reply option below.

    Thanks!

    June 19, 2018 at 2:04 pm #435518

    Drew Tumlinson
    Free User
    Post count: 19
    This reply has been marked as private.
    June 19, 2018 at 2:22 pm #435520

    Kor
    Moderator
    Post count: 16516

    Hi Drew,

    You can adjust the map sidebar using the custom CSS code below. Insert into Gd > Design > Scripts > Custom Style CSS

    

    @media only screen and (max-width: 600px) {
   div#geodir_map_v3_home_map_1_cat {
    min-height: 130px!important;
    width: 200px!important;
    max-height: 220px!important;
}

}
    

		
	
    


    

			
				

    

	
    

		June 19, 2018 at 8:42 pm

		
		#435555

		
		
		
	
    


    


    

	
    

		
		
    Drew Tumlinson
    Free User
    
		
		
     Post count: 19
    
	
    

	
    

		
		
    Hey there,
    

    Thanks for providing that starter code. Below is what I ended up adding:
    

    

    @media screen and (min-width:320px) { div#geodir_map_v3_home_map_1_cat {
    min-height: 50px !important;
    width: 270px;
    max-height: 120px !important;} }

@media screen and (min-width:375px) { div#geodir_map_v3_home_map_1_cat {
    min-height: 50px !important;
    width: 324px;
    max-height: 120px !important;} }

@media screen and (min-width:414px) { div#geodir_map_v3_home_map_1_cat {
    min-height: 50px !important;
    width: 365px;
    max-height: 120px !important;} }

@media screen and (min-width:768px) { div#geodir_map_v3_home_map_1_cat {
    min-height: 380px !important;
    width: 200px;
    max-height: 400px !important;} }
    

		
	
    


    

			
				

    

	
    

		June 20, 2018 at 10:30 am

		
		#435645

		
		
		
	
    


    


    

	
    

		
		
    Kor
    Moderator
    
		
		
     Post count: 16516
    
	
    

	
    

		
		
    Hi Drew, 
    

    Glad that helped. Let us know if you need anything further. 
    

		
	
    


    

			
		
	
    • 

	
  • 

		
    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