40% OFF EVERYTHING
Our 10th BIRTHDAY SALE
Buy Now

Customize categories for mobile

This topic contains 7 replies, has 2 voices, and was last updated by  Narayan Badatya 5 years, 11 months ago.

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

Open Support Ticket
  • Author
    Posts
  • May 22, 2018 at 1:30 pm #431629

    Narayan Badatya
    Expired Member
    Post count: 10

    Hi Team,

    Could you please help me to customize categories for mobile.

    My Website Link: https://www.bestmycity.com/

    If I open this Website on my laptop then it shows the categories properly if I open on phone then the categories show differently. Could you provide the CSS codes to change the display of categories(on the laptop) as like the laptop?

    Thanks and Regards,
    Narayan

    May 22, 2018 at 2:53 pm #431637

    Kor
    Moderator
    Post count: 16516

    Hi Narayan,

    Thanks for your post. Kindly insert the custom CSS code below into GD > Design > Scripts > Custom Style CSS to style it only on mobile. 

    

    @media only screen and (max-width: 600px) {
    .gd-cptcat-ul.gd-cptcat-parent.gd-cpt-flat li a {
    text-overflow:ellipsis!important;
    min-width: 100px!important;
}

.gd-cptcat-li a:link {
    margin: 0px!important;
    height: 40px!important;
    width: 130px!important;
    border: 1px solid black!important;
    border-radius: 10px!important;
    padding: 10px 10px!important;
    font-size:12px!important;
}

ul.gd-cptcat-ul.gd-cptcat-parent.gd-cpt-flat {
    margin: 5px!important;
}
}
    

		
	
    


    

			
				

    

	
    

		May 22, 2018 at 3:56 pm

		
		#431649

		
		
		
	
    


    


    

	
    

		
		
    Narayan Badatya
    Expired Member
    
		
		
     Post count: 10
    
	
    

	
    

		
		
    Thank You for your answer. Can You provide the CSS code in which more than one category item can display in a single row on mobile as like desktop/laptop?
    

		
	
    


    

			
				

    

	
    

		May 22, 2018 at 4:14 pm

		
		#431652

		
		
		
	
    


    


    

	
    

		
		
    Narayan Badatya
    Expired Member
    
		
		
     Post count: 10
    
	
    

	
    

		
		
    and also how to remove     “white-space: nowrap;” code from
    

    .gd-cptcat-ul.gd-cptcat-parent.gd-cpt-flat li a {
    
    text-overflow: ellipsis;
    
    overflow: hidden;
    
    white-space: nowrap;
    
    min-width: 170px;
    
    display: block;
    
}
    

    I tried to remove but it didn’t work
    

		
	
    


    

			
				

    

	
    

		May 23, 2018 at 8:36 am

		
		#431752

		
		
		
	
    


    


    

	
    

		
		
    Kor
    Moderator
    
		
		
     Post count: 16516
    
	
    

	
    

		
		
    Hi Narayan, 
    

    Thanks for your reply. Sorry, I don’t get what you mean by 
    

    Can You provide the CSS code in which more than one category item can display in a single row on mobile as like desktop/laptop?
    

    Could you elaborate? For the white-space, use the code below.
    

    white-space: normal!important;
    

    Thanks!
    

		
	
    


    

			
				

    

	
    

		May 23, 2018 at 2:13 pm

		
		#431815

		
		
		
	
    


    


    

	
    

		
		
    Narayan Badatya
    Expired Member
    
		
		
     Post count: 10
    
	
    

	
    

		
		
    In the desktop there are 4 category item display in a single line, for tablet it shows 3 item in a single row, but for mobile it show only 1 category item in a single row. Could you please provide the css code in which minimum two categories item should display in a single line.
    

    Thank You
    

		
	
    


    

			
				

    

	
    

		May 23, 2018 at 2:39 pm

		
		#431827

		
		
		
	
    


    


    

	
    

		
		
    Kor
    Moderator
    
		
		
     Post count: 16516
    
	
    

	
    

		
		
    Hi narayan, 
    

    Try using the custom CSS code below and see if it works.
    

    

    @media only screen and (max-width: 400px) {
.gd-cptcat-li a:link {
    width: 80px!important;
}
.gd-cptcat-ul.gd-cptcat-parent.gd-cpt-flat {
    width: 5%!important;
    min-width: 100px!important;
}
}
    

		
	
    


    

			
				

    

	
    

		May 23, 2018 at 3:21 pm

		
		#431835

		
		
		
	
    


    


    

	
    

		
		
    Narayan Badatya
    Expired Member
    
		
		
     Post count: 10
    
	
    

	
    

		
		
    It is working.
    
Thank you so much. 	☺
    

		
	
    


    

			
		
	
    • 

	
  • 

		
    Author
    

		
    

			
				Posts
			
		
    

	
    • 





			



	


		Viewing 8 posts - 1 through 8 (of 8 total)
	


	


		
	





		
				

			

				

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

					Open Support Ticket