Tagged: , ,

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • January 3, 2018 at 2:47 am #892683
    Autostopowicz

    Hi
    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?

    January 3, 2018 at 4:17 am #892716
    Mike

    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,
    Mike

    January 3, 2018 at 11:49 am #892776
    Autostopowicz

    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.

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

    January 3, 2018 at 2:34 pm #892836
    Autostopowicz

    I have found a solution:

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

    Nevertheless thanks.
    A.

    January 3, 2018 at 2:37 pm #892840
    Yigit

    Hey,

    Glad you figured it out!

    You could alternatively use Color Section element with 100% container width – https://kriesi.at/documentation/enfold/color-section-with-100-container/ :)

    Regards,
    Yigit

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