Change listing image mobile responsive settings
This topic contains 12 replies, has 3 voices, and was last updated by Rafaela 6 years, 6 months ago.
We have moved to a support ticketing system and our forums are now closed.
Open Support Ticket-
AuthorPosts
-
September 7, 2018 at 2:05 am #445703
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 #445706This reply has been marked as private.September 7, 2018 at 6:04 am #445721Hi 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 #447168Hi 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,
RafaelaSeptember 21, 2018 at 12:50 am #447171This reply has been marked as private.September 21, 2018 at 12:50 am #447172Btw I am using an iphone Version 6 and Safari browser on the iphone.
September 21, 2018 at 12:53 am #447173File was too big, here again
September 21, 2018 at 1:16 am #447176Hi 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 #447178Hi 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,
RafaelaSeptember 21, 2018 at 1:44 am #447180This reply has been marked as private.September 21, 2018 at 3:53 am #447182Hi 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 #447202Hello,
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 #447429Hi 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
-
AuthorPosts
We have moved to a support ticketing system and our forums are now closed.
Open Support Ticket