Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • #892683

    I am using a google map plugin that takes up the width of it’s container, so making a full width map is just a case of styling the container to be full width. But I decided to style only the map element rather than changing the container width. Unfortunatelly It ain’t easy – the element behaves defferently using different screen resolutions. What I want to achieve is to have the map as wide as the viewport. I am using css code to style that element like:
    … {
    left: -50px !important;
    width: 100vw !important;
    I am using stretched layout, with no sidebars, 100% maximum container width.

    Unfortunatelly after screen resizing (to check out the responsive states) some margins occur, the map goes off the screen and I can not figure out how to make the map look allways the same on all screen resolutions. Tried different “@media” syntaxes – with no success.

    Could You please help?


    Hey Autostopowicz,
    Try using

    … {
    margin-left: -50px !important;
    margin-right: -50px !important;

    if 50px is you container margin. or use a percentage to be responsive.

    Best regards,


    Hi Mike

    I have tried this allready – does not work on screens below 767 px width. Same as the solution given in my first message.

    You can take a look by Yourself…

    The left side of the map goes off the webbrowser window, and a margin appears on the right.

    I have noticed that the container margin is 50px by default.


    I have found a solution:

    (…) {
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    width: 100vw !important;

    Nevertheless thanks.



    Glad you figured it out!

    You could alternatively use Color Section element with 100% container width – :)


Viewing 5 posts - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.