Change listing image mobile responsive settings

This topic contains 12 replies, has 3 voices, and was last updated by  Rafaela 5 years, 7 months ago.

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

Open Support Ticket
  • Author
    Posts
  • September 7, 2018 at 2:05 am #445703

    Rafaela
    Full Member
    Post count: 131

    Hi guys,

    We have used the recommended image size of 800×600 for the majority of our listings and that works fine on desktop however on mobile the image is a different ratio which does not display logos properly.
    Please see attached screenshot on mobile and desktop of the same listing.

    Where or how can I change the mobile responsive image display settings?

    Thanks!

    Rafaela

    September 7, 2018 at 2:09 am #445706

    Rafaela
    Full Member
    Post count: 131
    This reply has been marked as private.
    September 7, 2018 at 6:04 am #445721

    Kor
    Moderator
    Post count: 16516

    Hi Rafaela,

    Thanks for your post. Try using the custom CSS code below and see if it’s what you’re looking for. 

    

    @media only screen and (max-width: 600px) {
    .geodir_advance_search .geodir-post-img .geodir_thumbnail.geodir_lazy_load_thumbnail {
    height: 300px !important;
}
}
    

    Thanks!
    

		
	
    


    

			
				

    

	
    

		September 21, 2018 at 12:49 am

		
		#447168

		
		
		
	
    


    


    

	
    

		
		
    Rafaela
    Full Member
    
		
		
     Post count: 131
    
	
    

	
    

		
		
    Hi Kor, 
    

    Thanks so much for the code snipped above! Awesome!!!
    
It worked, fyi I did end up changing the height to 225, which looked better for the 800×600 logos we had uploaded. 
    

    I have just noticed another issue which only exists on mobile.
    
We are uploading the images with height of 600px so if its a landscape it will be 800×600 and if its portrait it will be 300×600 or thereabouts. GD will then change the sizes to 516×387 and 201×387. The point is that the height is the same. On desktop they will all show nicely in a row which makes sense as they all have the same height but just different width.
    
However on mobile it will show them as different heights which then also puts a gap between the landscape photos and the listing info as the height of the photos section will be taken from the portrait photos which show as too high.
    
Any suggestions on why this is happening and how we can fix this? 
    

    Thanks,
    
Rafaela 
    

		
	
    


    

			
				

    

	
    

		September 21, 2018 at 12:50 am

		
		#447171

		
		
		
	
    


    


    

	
    

		
		
    Rafaela
    Full Member
    
		
		
     Post count: 131
    
	
    

	
    

		
		This reply has been marked as private.
		
	
    


    

			
				

    

	
    

		September 21, 2018 at 12:50 am

		
		#447172

		
		
		
	
    


    


    

	
    

		
		
    Rafaela
    Full Member
    
		
		
     Post count: 131
    
	
    

	
    

		
		
    Btw I am using an iphone Version 6 and Safari browser on the iphone. 
    

		
	
    


    

			
				

    

	
    

		September 21, 2018 at 12:53 am

		
		#447173

		
		
		
	
    


    


    

	
    

		
		
    Rafaela
    Full Member
    
		
		
     Post count: 131
    
	
    

	
    

		
		
    File was too big, here again
    

		
	
    


    

			
				

    

	
    

		September 21, 2018 at 1:16 am

		
		#447176

		
		
		
	
    


    


    

	
    

		
		
    Kor
    Moderator
    
		
		
     Post count: 16516
    
	
    

	
    

		
		
    Hi Rafaela, 
    

    Thanks for your reply. It looks like the slider is created using a 3rd party module. I’d suggest that you contact the author of the carousel module for further assistance. 
    

    Thanks!
    

		
	
    


    

			
				

    

	
    

		September 21, 2018 at 1:44 am

		
		#447178

		
		
		
	
    


    


    

	
    

		
		
    Rafaela
    Full Member
    
		
		
     Post count: 131
    
	
    

	
    

		
		
    Hi Kor,
    

    I have done some further investigation into this and strangely enough a square image with the same height will show in the same height.See attached screenshot.
    
Not sure if this makes sense to you.
    

    On mobile only the images will show up one by one (as opposed to desktop where they show in a row).
    
For mobile only, how can I centre the images? I.e. if in the screenshot the image is square i.e. won’t fill the whole width its currently left aligned and I would love it to be centre aligned.
    

    I hope these are the last changes for mobile and all listings will be perfect after that 🙂
    
Most of our users are using GD on mobile..
    

    Thanks so much,
    
Rafaela 
    

		
	
    


    

			
				

    

	
    

		September 21, 2018 at 1:44 am

		
		#447180

		
		
		
	
    


    


    

	
    

		
		
    Rafaela
    Full Member
    
		
		
     Post count: 131
    
	
    

	
    

		
		This reply has been marked as private.
		
	
    


    

			
				

    

	
    

		September 21, 2018 at 3:53 am

		
		#447182

		
		
		
	
    


    


    

	
    

		
		
    Rafaela
    Full Member
    
		
		
     Post count: 131
    
	
    

	
    

		
		
    Hi Kor,
    

    Thanks for your response!
    
I have had a look through all my installed plugins and none of them jumps out to be problem with this. Can you tell which plugin is interfering with the GD mobile settings?
    
I am thinking the most likely is Flocks for Geodirectory but that’s associated with GD as well?
    

    I have had an idea though, couldn’t we force the images into a certain height same we did with your code for the GD Search result page above which obviously worked?
    

    To manipulate the listing images as opposed the GD Search result images to what would I have to change the code you gave me? I can then play around with heights and centering the image, which should work…
    

    @media only screen and (max-width: 600px) {
    
    ||which class is affected? .flocks-single-geodirectory-carousel-container .flocks-single-geodirectory-carousel OR .owl-carousel ???|| {
    
    height: 300px !important;
    
}
    
}
    

    Thanks so much for your help, I appreciate it! 
    

    Rafaela 
    

		
	
    


    

			
				

    

	
    

		September 21, 2018 at 9:52 am

		
		#447202

		
		
		
	
    


    


    

	
    

		
		
    Alex Rollin
    Moderator
    
		
		
     Post count: 27815
    
	
    

	
    

		
		
    Hello,
    

    We have taken a look at this, and what we see is that the site is using Flocks theme and that the listing slider is produced by the Owl slider. Neither of these are GD products, and you will need to contact their authors for more information about how to customize them.
    

    There are some settings that are coming through in the source:
    

    

    
transform: translate3d(-3225px, 0px, 0px); transition: all 0.25s ease 0s; width: 5160px;

    

    This appears to offset the images in the slider, but the settings are not evident in the dashboard.
    

		
	
    


    

			
				

    

	
    

		September 24, 2018 at 3:28 am

		
		#447429

		
		
		
	
    


    


    

	
    

		
		
    Rafaela
    Full Member
    
		
		
     Post count: 131
    
	
    

	
    

		
		
    Hi guys,
    

    Thanks for the hints, I will follow it up with the Flocks team further!
    
Appreciate your time on this.
    

    Fyi, if anyone else has the same problem, I got it to look a bit better with the following CSS settings.
    
The result is that at least all pics will be cut at the same height which looks a lot cleaner but obviously the cropping of images which are not 800×600 is still not great.
    

    @media only screen and (max-width: 600px) {
    
  .owl-carousel  {
    
     height: 275px !important;
    
     width: auto !important;
    
     display: block !important;
    
}
    
}
    

    Rafaela 
    

		
	
    


    

			
		
	
    • 

	
  • 

		
    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