Remove Search Results Map and expand view for listings only

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

Open Support Ticket

Author

Posts
May 14, 2018 at 5:35 pm #430539

rigots
Lifetime Member

Post count: 275

Hi I am using the Directory Starter + Supreme Directory and when I do a search the right side has the map. I would like to completely remove the map on the right side and use that space to expand the search result listings window to cover the complete space.

Can this be done with the supreme directory? and how?

Thank you.
Rigo

May 15, 2018 at 1:31 am #430586
Kor
Moderator

Post count: 16516
Hi Rigo,

Thanks for your reply. Kindly use the custom CSS code below to achieve what you needed there. Insert into GD > Design > Scripts > Custom Style CSS
```
.search-results #gd-sidebar-wrapper {
    display: none!important;
}
.sd.search.search-results.geodir-page #geodir_content {
    width:100%!important;
    flex-basis: 100%!important;
}
```
May 15, 2018 at 6:34 pm #430700

rigots
Lifetime Member

Post count: 275

Great thank you, that worked!

The google map access is limited before they start charging. Does this mean I am not accessing the map in the search result page? or is the map still being access in the back ground and just not showing in the listing results?

Thank you.

May 15, 2018 at 7:48 pm #430709

Alex Rollin
Moderator

Post count: 27815

CSS will only hide the map.

If you don’t want to load the map, remove the API key.

May 15, 2018 at 10:57 pm #430727

rigots
Lifetime Member

Post count: 275

Than you, I see.

But I do want the map on the details page, so I guess I need to keep the API key.
When my page gets more popular maybe I can use the open source map, is that possible?

Thank you.

May 16, 2018 at 8:11 am #430791

Alex Rollin
Moderator

Post count: 27815

It is possible to switch, yes.

May 16, 2018 at 3:38 pm #430873

rigots
Lifetime Member

Post count: 275

Hi I performed the suggested change above to remove map view on the search results screen:
.search-results #gd-sidebar-wrapper {
display: none!important;
}
.sd.search.search-results.geodir-page #geodir_content {
width:100%!important;
flex-basis: 100%!important;
}

Om my listings from where people write their listing information there is no address of map option. Could the above CSS also removed the address and map section in the listing form when adding a listing?

If not, how do I include the address field in the New Place Listing Form?
I went to Geodirectory->Place Settings -> Custom Fields and on the left side there is no option to add the “Address” component.
How do I include an address component on the New Place Listing form?

Thank you.

May 16, 2018 at 3:51 pm #430878

rigots
Lifetime Member

Post count: 275

I miss spoke above.
The Geodirectory->Place Settings -> Custom Fields does have an “Address” field.
But I have a custom Post Type by the name of “Service” and my Geodirectory->Service Settings -> Custom Fields does not have an “Address” field, why would this be?, so my New Listings Form does not have the address field.

Thank you.

May 29, 2018 at 5:51 pm #432632

rigots
Lifetime Member

Post count: 275

On more question here, now that I removed the map on the right side with the CSS provided above there is so much more space on my desktop screen and my listing pictures from a search result are getting cut off because it looks like they get displayed on a 4×3 display ratio, can I change the image to get dispayed on a 16 x 9 ration?
Or can I just us CSS to sellect the picture size on want, since there is more space now on the search result screen I want to be able to display the complete image without cutting the right and left sides as it is now. I am scanning business cards win and they have a would screen ratio.

Thank you.

May 30, 2018 at 7:31 am #432697

Alex Rollin
Moderator

Post count: 27815

CPT with no address – “How do I include an address component on the New Place Listing form?”

Check if you have disabled the address field by disabling the physical location of the CPT at :

Geodirectory – General – Select CPT to disable physical location

Remove the CPT from that setting if you want the address/location.

can I change the image to get dispayed on a 16 x 9 ration?

Please send the URL for the page and we will take a look. Generally speaking the most common remedy is a CSS adjustment like this one: https://wpgeodirectory.com/support/topic/listing-image-supreme-directory/#post-403937

May 30, 2018 at 3:36 pm #432798

rigots
Lifetime Member

Post count: 275

This reply has been marked as private.

May 31, 2018 at 5:07 pm #432965

rigots
Lifetime Member

Post count: 275

Hi, Any advice here? I am still trying to figure out how to specify the displayed picture size on the search listing results, so my pictures don’t get cut off.

Thank you.
Rigo

June 1, 2018 at 2:40 am #433040
Kor
Moderator

Post count: 16516
Hi Rigo,

Thanks for your reply. It looks like the only way to prevent it from cutting off would be to use the custom CSS code below. Could you give it a try and see if it’s what you’re looking for?
```
.geodir_category_list_view li .geodir-post-img .geodir_thumbnail {
    background-size: contain!important;
}
```
June 1, 2018 at 4:01 pm #433149

rigots
Lifetime Member

Post count: 275

Great,
That was great it worked, now I can see the whole image on the image box in the search results and on my mobile phone it works great too, I see the whole image.

Now on my mobile phone, when I click on the any of the search result items and go to the detail page the main picture at the top is completely cut on both sides, right and left. I just wish the image was the same as in the search results where the image shows up completely at the top.

Is there way to do that?
Can I do “background-size: contain!important;” for the top picture at the top of the detail page?
Or could I use
@media only screen and (max-width: 500px) { … }, @media only screen and (max-width: 700px) { … }, @media only screen and (max-width: 900px) { … }, etc. to set the “background-size:” to different sizes depending on the resolution?

Can you please show me how to access the picture background for the top picture in the detail page?

For the search results it was “.geodir_category_list_view li .geodir-post-img .geodir_thumbnail”, I need to know what it is for the top picture in the detail page.

Thank you.

June 1, 2018 at 5:24 pm #433155

rigots
Lifetime Member

Post count: 275

Hi,
By experiment I noticed that
.sd.single.geodir-page .featured-area { height: 26vh;}
controls the with of the top featured image even thought the tag is “height”. If I set the “height” more than “26” it cuts off more of the picture on the right and left. If I set below “26” nothing happens why? The best I can do it “26” this is the setting that cuts less of the image off, but there is some cropping going on.

Any advice?

Thanks,
Author

Posts