Grid View Two Columns

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

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

Open Support Ticket
  • Author
    Posts
  • January 16, 2018 at 2:08 pm #412953

    eic2010
    Full Member
    Post count: 209

    Hi
    I would like the default listings page to show as two columns. I have set this in Design – Listings but when I look at it live it is only showing as one column. The width of the content listing section is currently 63, I have tried making this smaller but it just reduces the column size. If I make it bigger the right hand sidebar jumps down. What settings do I need to change to have it show as 2 columns?
    Thanks in advance!

    January 16, 2018 at 2:28 pm #412960

    Kor
    Moderator
    Post count: 16516

    Hi eic2010,

    Thanks for reaching us.Please share the URL of the site in question so we can take a better look at it and also WP temp admin access to your site. You can post the details here using the private reply option below.

    Thanks!

    January 16, 2018 at 6:15 pm #413006

    eic2010
    Full Member
    Post count: 209
    This reply has been marked as private.
    January 17, 2018 at 5:24 am #413079

    Kor
    Moderator
    Post count: 16516

    Hi Eic2010,

    Could you please check now and see if it’s what you’re looking for?

    Thanks!

    January 17, 2018 at 1:49 pm #413134

    Alex Rollin
    Moderator
    Post count: 27815

    Hello,

    for future reference, this is the CSS that Kor added:

    

    .geodir_category_list_view li.gridview_onehalf {
    width: 48%!important;
}

    

    For further CSS changes, please see this document:
    

    https://wpgeodirectory.com/docs/customizing-your-style/
    

		
	
    


    

			
				

    

	
    

		January 18, 2018 at 10:20 am

		
		#413262

		
		
		
	
    


    


    

	
    

		
		
    eic2010
    Full Member
    
		
		
     Post count: 209
    
	
    

	
    

		
		
    Thats great, thanks so much!
    
Sorry to be a pain but If I want the padding/margin between the two listings to be bigger what would I need to do?
    

		
	
    


    

			
				

    

	
    

		January 18, 2018 at 11:06 am

		
		#413264

		
		
		
	
    


    


    

	
    

		
		
    eic2010
    Full Member
    
		
		
     Post count: 209
    
	
    

	
    

		
		
    Hi
    
Sorry again!
    
But when I now look at it on a phone the column now remains as two. Ideally I would like it to show as two columns on desktop but then as one on phones
    

		
	
    


    

			
				

    

	
    

		January 18, 2018 at 11:11 am

		
		#413265

		
		
		
	
    


    


    

	
    

		
		
    Kor
    Moderator
    
		
		
     Post count: 16516
    
	
    

	
    

		
		
    Hi there, 
    

    Replace the code Alex shared earlier with the below and see if it’s what you’re looking for. Insert into GD > Design > Scripts > Custom Style CSS
    

    

    .geodir_category_list_view li {
  margin-right:15px!important;
}

.geodir_category_list_view li.gridview_onehalf {
    width: 45%!important;
}
    

    Thanks!
    

		
	
    


    

			
				

    

	
    

		January 18, 2018 at 1:00 pm

		
		#413276

		
		
		
	
    


    


    

	
    

		
		
    eic2010
    Full Member
    
		
		
     Post count: 209
    
	
    

	
    

		
		
    Hi
    
Thanks for that
    
I tried that but on a phone it shows small. How do I have it show as two on a desktop but revert to a large one column on smaller devices?
    

    And on a desktop it shortens the listings on the right.
    

		
	
    


    

			
				

    

	
    

		January 18, 2018 at 4:19 pm

		
		#413302

		
		
		
	
    


    


    

	
    

		
		
    Alex Rollin
    Moderator
    
		
		
     Post count: 27815
    
	
    

	
    

		
		
    Hello,
    

    GD comes with default styles that perform as you describe, with one column on mobile.
    

    If you remove the custom CSS that is what you should see.
    

		
	
    


    

			
				

    

	
    

		January 18, 2018 at 5:07 pm

		
		#413311

		
		
		
	
    


    


    

	
    

		
		
    Kor
    Moderator
    
		
		
     Post count: 16516
    
	
    

	
    

		
		
    Hi there, 
    

    Try adding this custom CSS code and see if it fixes the sizes on mobile device. 
    

    

    @media only screen and (max-width: 500px) {
    .geodir_category_list_view li.gridview_onehalf {
    width: 100%!important;
}
}
    

		
	
    


    

			
				

    

	
    

		January 19, 2018 at 8:03 am

		
		#413411

		
		
		
	
    


    


    

	
    

		
		
    eic2010
    Full Member
    
		
		
     Post count: 209
    
	
    

	
    

		
		
    Hi Kor
    
Thank you that worked great.
    
If I removed the custom css then the two column wasnt showing on desktop as two, it too was reverting to one column
    

    .geodir_category_list_view li {
    
  margin-right:15px!important;
    
}
    

    .geodir_category_list_view li.gridview_onehalf {
    
    width: 45%!important;
    
}
    
@media only screen and (max-width: 500px) {
    
    .geodir_category_list_view li.gridview_onehalf {
    
    width: 100%!important;
    
}
    
}
    

    but going with the above code has worked, thank you!
    

		
	
    


    

			
				

    

	
    

		January 19, 2018 at 11:25 am

		
		#413443

		
		
		
	
    


    


    

	
    

		
		
    Kor
    Moderator
    
		
		
     Post count: 16516
    
	
    

	
    

		
		
    Hi there, 
    

    Glad that you sorted it out yourself. Enjoy GD and have a nice day!
    

    Thanks!
    

		
	
    


    

			
		
	
    • 

	
  • 

		
    Author
    

		
    

			
				Posts
			
		
    

	
    • 





			



	


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