Directory Listings On Left & Tall Map On Right

[Dev23847]

Hi, trying to finish up the site this week and get ready for launch next week so we appreciate your continued support!

Page in question is called “Where To Buy”.

Our map is taller than it is wide so we want to put the directory listings on the left side of the page and the actual map on the right side. Could not figure out how to do this with css.

Thank you 🙂

[Rui Guerreiro – SUPPORT]

Hi,

That way it won’t work. Can you make everything in 1/1 of Width so I can check if it’s possible with some css?
Thanks

-Rui

[Dev23847]

This reply has been marked as private.

[David Martin – Support]

The supplied login details are not working, can you check those and update?

[Dev23847]

This reply has been marked as private.

[David Martin – Support]

Hi,

Just to clarify as the layout has changed since I last looked. Do you want to move the current right side “Results”, over to the left?

[Dev23847]

We found a workaround to this issue by duplicating the maps element in the backend with swift editor, then assigning the one on the left to maps only and the one on the right to list only. Only problem with this is We lose the interaction between map and listing, less important than Google Maps Mobile Bug http://www.swiftideas.com/forums/topic/google-maps-mobile-bug/

Thanks.

[David Martin – Support]

1) Create a test page with your old page setup. This should be a simple CSS tweak.

2) Will take a look.

– David.

[Dev23847]

This reply has been marked as private.

[David Martin – Support]

Hi,

I was not sure if it was safe to alter that page, I also created a test page: http://34.250.245.156/directory-test/

Please add this to Theme Options => Custom CSS:

.spb_directory_widget .spb_map_wrapper {
    display: block;
    width: 50% !important;
    max-width: 50%;
    overflow: hidden;
    float: left;
}
.spb_directory_widget .directory-results.container {
  display: inline-block;
  float: left;
  width: 100%;
  max-width: 50%;
  margin: 0 auto;
  float: left !important;
}

The end result would look like this:

[Dev23847]

thanks David!

[Rui Guerreiro – SUPPORT]

No problem. Thanks David.

-Rui