Filter Dropdown Box Customize

[[email protected]]

Hello,
Is it possible to decrease the width of the filter dropdown box and move into the map area? I’ve attached a screenshot of it currently

Thanks,
Paul

Attachments:

You must be logged in to view attached files.

[[email protected]]

site url: http://www.schoolreadinessconsulting.com/tell-your-story/

[[email protected]]

Hi Paul,

Thank you so much for getting in touch with us!

This can be achieved with some custom CSS. Could I please ask how wide you would like the dropdown to be and where you would like it to be placed so that I can assist you further?

Thanks.

Kind regards,
Dylan

[[email protected]]

Hey Dylan! I would say width:400px and place right underneath the “Map | Satelite” bar? Is that possible?

Thanks,
Paul

[[email protected]]

Hi Paul,

I am so sorry for the delay in response over the weekend.

I noticed that the drop-down box has already been styled as you have described.

Do you still need help with this?

Kind regards,
Dylan

[[email protected]]

Thanks Dylan, I was able to customize it. The last thing I would like to do is put “Filter By” In a gray box center. If you have any thoughts please let me know.

Thx

[[email protected]]

Hi Paul,

Thanks for the response.

I am glad to hear that you got this resolved.

Do you mean that you want it to be inside a gray box and centered? Can you please try this CSS to achieve that?

#wpgmza_filter_1 {
background: #999 !important;
border-radius: 2px !important;
}

.jcf-select.jcf-unselectable {
border:none !important;
}

Does this help?

Kind regards,
Dylan

[[email protected]]

Thanks Dylan – This looks good, any way to make this more mobile friendly? The top part – “filter by” is a little off-centered but the actual blue button looks and functions great!

[[email protected]]

Hi Paul,

I am happy to hear that helped.

Can I please ask on what mobile devices you have tested this where it looks off-center so that I can assist you further with this as it seems correct on my side?

Thank you.

Kind regards,
Dylan

[[email protected]]

I’m using an Andriod (Samsung Galaxy S7). I attached a screenshot of what I see. I think it looks good but I can see my client critiquing it. See how the “filter by” is on two lines and the gray box background doesn’t extend to the length of the blue box? Thanks Dylan

Attachments:

You must be logged in to view attached files.

[[email protected]]

Hi Paul,

Thank you for the screenshot and the details.

To fix this can you please add the following CSS:
#wpgmza_filter_1 {
width: 150px !important;
}

Please let me know if it helps.

Kind regards,
Dylan

[[email protected]]

Worked like a charm! Thanks for all your assistance Dylan!

[[email protected]]

Hi Paul,

That is great to hear! It is only a pleasure helping you 🙂

If you have a second to spare, could you please consider leaving a review here – https://wordpress.org/support/plugin/wp-google-maps/reviews/? It would mean the world to me!

Thank you for your time and patience and please feel free to reach out if there is anything that I can assist you with.

Have a great day further!

Kind regards,
Dylan

[Author]

Posts