Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • June 10, 2022 at 3:45 pm #1354822
    mackfoyt

    Hi,

    I’m trying to make the image-map (made by plugin ImageMapPro) with full-height (screen height), so that there is no scrolling and I cannot make it happen. I have tried several techniques using full-height/heigh parameters, but no success. It seems to use the full-width all the time instead.

    I have tried to use custom id with custom css, but my skills are rather amateur level:
    #domov .container { height: 100%; max-height: 100%; margin: 0; padding: 0; }

    The ideal setup would be to have a colour section as background element and on top of that have the ImageMap integration using the screen’s full height. Depending on the screen, the ImageMap would shrink to fit the screen height (ensure there is no scrolling up/down, width is secondary) and the free space on the side or around would be coloured by the colour section behind.

    Could you please help me out with it or provide advice?

    Thank you.

    Screenshot
    Layout builder

    June 12, 2022 at 8:19 pm #1354980
    Mike

    Hey mackfoyt,
    Thank you for your patience, the ImageMapPro uses absolute position on the background container, so you will be limited because too much styling makes the map shapes move out of place.
    Please try this css in your Quick CSS:

    #domov > .container {
	padding: 0;
	display: block;
}
.imp-zoom-wrap {
    width: 90%;
    margin: auto;
}

    After applying the css, please clear your browser cache and check.
    This is the expected results:
    2022-06-12_002.jpg

    Best regards,
    Mike

    June 13, 2022 at 10:44 pm #1355099
    mackfoyt

    This works, exactly as I wanted and I can steer it with the width furher. So good.

    Thank you very much!

    Cheers

    June 13, 2022 at 11:45 pm #1355106
    Mike

    Hi,
    Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

    Best regards,
    Mike

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • The topic ‘How to make full-screen height element with imagemap’ is closed to new replies.