Google Maps Element – Adjustable Height

  • Resolved gugax

    (@gugax)


    3 years, 4 months ago

    Hi,

    I’m having an annoying behaviour regarding Google Maps height that I’m not able to workaround it, maybe you can support.

    # Goal
    The goal is to adjust the height of google maps to the same size as another element in the same page section (dynamically and depending on screen size).

    # Context
    I have a section in my page with 2 columns:
    – Left column: video element (with youtube link)
    – right column: google maps element

    I have default settings for everything (section, left and right column, video and google maps element), with exception of settings regarding the youtube url and google maps configured with address, height and zoom).

    # Issue
    As mentioned. the issue I’m having is that the height of google maps is kinda fixed, as we are forced to specify in height of it. In edit mode i match the height of google maps to the same height as my video (but of course this is based on my screen).

    If I resize my window (to simulate other screens size), the two elements at some point have different heights, as google maps has fixed height and don’t adjust to the resize. Video element on the other side adjusts (Which is exactly the behaviour i was expecting to have for google maps as well!). So on left column my Video stays rather smaller or bigger than right column where i have google maps.

    How can I force google maps height to match exactly the same height as my video element?
    Is it possible to force my specific section to have a min and max height for the elements inside based on screens size?

    Thanks for the supoort

    • This topic was modified 3 years, 4 months ago by gugax.
Viewing 5 replies - 1 through 5 (of 5 total)
  • Thread Starter gugax

    (@gugax)

    Some example images:

    In edit mode (same size visually speaking): https://ibb.co/6sCd6Qb
    Google maps bigger than video (smaller window size non edit mode): https://ibb.co/3R7CSQQ
    Google maps smaller than video (bigger window size non edit mode): https://ibb.co/NnH3sLk

    • This reply was modified 3 years, 4 months ago by gugax.

    Hi,

    Can you send me your site URL?

    Thread Starter gugax

    (@gugax)

    Hi @ozyeger ,

    Sorry but can’t. It’s hosted locally. I don’t have the live version yet, that’s why i shared some screenshots.

    What information do you need? Maybe we can try to arrange something

    Here is some additional info if you need to replicate:

    – I’m using Hestia theme
    – I’m also using child Hestia theme (but i don’t have any custom CSS regarding the html elements used by Elementor)
    – I have a single page website
    – I have a section element from Elementor, with 2 columns
    – Left side i have Video element from Elementor
    – Right side i have Google Maps element from Elementor

    • This reply was modified 3 years, 4 months ago by gugax.
    Thread Starter gugax

    (@gugax)

    Are you investigating this issue?

    Thread Starter gugax

    (@gugax)

    Nvm… I managed to figure out using custom CSS on Elementor tags.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Google Maps Element – Adjustable Height’ is closed to new replies.