Navigation
Archive / How to make height of google map responsive
This is archived content. Visit our new forum.

Tagged: 

  • Author
    Posts
  • September 19, 2016 at 11:16 am #1181663
    yhshin1020
    Participant

    Hey,

    I have a google map set up on this page: http://www.guidedogssg.com/contact-us/

    It looks fine on large screens, however, when I decrease the width of the browser, this happenings (see pic below).

    I was wondering if there is any way to make it such that the height of the google map is automatically set to the height of the column next to it, with the header “How to find us”.

    This would mean that when I try to resize the browser, it should have the same height as the half column on the right of it.

    I hope you get what I’m saying.

    Thanks.

    September 19, 2016 at 11:17 am #1181666
    yhshin1020
    Participant
    This reply has been marked as private.
    September 19, 2016 at 1:23 pm #1181871
    Jade
    Moderator

    Hi there,

    You can add this under Custom > CSS in the Customizer.

    .page-id-35 #x-content-band-1 .x-column,
.page-id-35 #x-content-band-1 .x-column #x-google-map-1,
.page-id-35 #x-content-band-1 .x-column .x-map .x-map-inner {
    height: 100vh !important;
}
  • Author
    Posts
  • <script> jQuery(function($){ $("#no-reply-1181663 .bbp-template-notice, .bbp-no-topic .bbp-template-notice").removeClass('bbp-template-notice'); }); </script>