Popular categories widget: how to show correctly icons and names on mobile

This topic contains 16 replies, has 3 voices, and was last updated by  Stiofan O’Connor 6 years, 9 months ago.

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

Open Support Ticket

Tagged: , , ,

  • Author
    Posts
  • January 10, 2018 at 12:12 am #412140

    gruppopegaso
    Lifetime Member
    Post count: 85

    I’m near to complete the setting of the directory with supreme-directory theme.
    So there is the list of popular categories, via the widget.
    The problem is on mobile in vertical position where i see very little icons (i use an iPhone 7 but is the same on Motorola C Plus) of categories without names and with big numbers (the number of places inside the category).
    So the icons are too small to understand the content and i prefer to show the name of categories.
    Can i do all with CSS or there is some function that hide categories names on little screen?
    I’m almost ready with site so this is a little details but i must resolve to improve usability.

    And as a feature request… how about a different icon for every use: mobile vertical, mobile horizontal, tablet, desktop, map? I think usability will be improved a lot.

    Thank you
    GP

    January 10, 2018 at 6:19 am #412157

    Kor
    Moderator
    Post count: 16516

    Hi GP,

    Yes, what you needed there can be achieved using custom CSS. Do you mind sharing the URL of the site in question so we can take a look? As for your feature request, feel free to submit it here https://wpgeodirectory.com/requests/

    Thanks!

    January 12, 2018 at 9:45 am #412447

    gruppopegaso
    Lifetime Member
    Post count: 85
    This reply has been marked as private.
    January 12, 2018 at 10:06 am #412449

    Kor
    Moderator
    Post count: 16516
    This reply has been marked as private.
    January 12, 2018 at 7:48 pm #412533

    gruppopegaso
    Lifetime Member
    Post count: 85
    This reply has been marked as private.
    January 12, 2018 at 7:51 pm #412534

    gruppopegaso
    Lifetime Member
    Post count: 85
    This reply has been marked as private.
    January 12, 2018 at 7:52 pm #412536

    gruppopegaso
    Lifetime Member
    Post count: 85
    This reply has been marked as private.
    January 12, 2018 at 9:10 pm #412552

    gruppopegaso
    Lifetime Member
    Post count: 85
    This reply has been marked as private.
    January 12, 2018 at 10:12 pm #412568

    gruppopegaso
    Lifetime Member
    Post count: 85
    This reply has been marked as private.
    January 12, 2018 at 10:17 pm #412570

    gruppopegaso
    Lifetime Member
    Post count: 85
    This reply has been marked as private.
    January 13, 2018 at 6:36 pm #412660

    gruppopegaso
    Lifetime Member
    Post count: 85

    Do you checked? I tried with an android emulator and i see that name appears. So there is some function that iphone and android real phone doesn’t recognize.

    Thank you

    January 13, 2018 at 7:36 pm #412675

    Kor
    Moderator
    Post count: 16516
    This reply has been marked as private.
    January 13, 2018 at 10:05 pm #412685

    gruppopegaso
    Lifetime Member
    Post count: 85

    I think is a question of pixels… somewhere…

    January 15, 2018 at 9:37 am #412752

    gruppopegaso
    Lifetime Member
    Post count: 85

    Did you checked? Any news?

    January 15, 2018 at 12:06 pm #412760

    Stiofan O’Connor
    Site Admin
    Post count: 22956

    Looks like the rule u want to override is this, please give it a try.

    

    @media (max-width: 375px){
.sd.home .cat-link, .sd.sd-location .cat-link {
   display: block;
}
}
    

    Stiofan
    

		
	
    


    

			
		
	
    • 

	
  • 

		
    Author
    

		
    

			
				Posts
			
		
    

	
    • 





			



	


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