How to make map fit entire screen?

New home Forums Basic Version How to make map fit entire screen?

Tagged: ,

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #30319
    zedzed
    Member

    Hello,

    If you check out my map here http://osiris.online/map/, you can see that it does not extend the entirety of the screen. I currently have the width set to 100% in the General settings tab and Height to 800px – I’m hoping I can make it stretch a little more but keep it 800px height –

    #30324

    Hi zedzed018,

    This can also be achieved with custom CSS that I would gladly provide you with but would need to have access to the page where the map is being displayed to make sure that I give you the correct CSS.

    Would it be possible to temporarily disable maintenance mode so that I can assist you with this further?

    Kind regards,
    Dylan

    #30325
    Perry
    Moderator

    Hi there,

    Setting the width to 100% makes it fill 100% of the containing element. If you want it to be 100% of the screen width regardless of the container width, please do the following

    Put the map element in a container with position: relative; then give the map element position: absolute;

    Create a dummy element with height 800px, as doing the above will take it out of the content flow, so you need to push the content down by 800px or else the map will cover it.

    You then need a function which you call on load and on the window resize event, which finds the x position of the position: relative; container, then you need to give set map elements “left” property to -x px.

    Then to make it full width you need to use CSS to set the map elements width to 100vw;

    Does that all make sense to you?

    Kind regards

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