Creating an embedded image map that is responsive on all devices and full bleed on the page

Site URL: https://www.platformartprojects.com/babar-suleman-project

Hello,

I have created an embedded image map with image-map.net. Is there some code I could add that will make this work responsively on all devices? I would also like to remove the header and footer space from just this page on the site so that the image is full bleed. At the moment it looks fine on desktop but white blocks appear in the top and bottom right side of the screen on mobile.

I'm very grateful for any help!

What is the password?
I need an image map myself.
 

Hello gcart,

Thank you for your reply. The password is bs2021. Do you mean you need the code for the image map? This is it below. Many thanks!

<!-- Image Map Generated by http://www.image-map.net/ -->
<img src="https://images.squarespace-cdn.com/content/v1/5ee5fead6b26b20957e2ab88/1622618770204-SAY5X08W97X2HCD4OPIK/ke17ZwdGBToddI8pDm48kEjbVjQR2ddK6SXFP0mZD3p7gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z5QHyNOqBUUEtDDsRWrJLTmEZprBMNaW6dUYQUrCwR2cQHfnLBixzftg7X-hXwvVFy5C84tiom1ZR23K4vaHueE/Carte+de+%28Khudi%29Magie.jpg?format=2500w" usemap="#image-map">

<map name="image-map">
    <area target="_self" alt="Venus in pisces" title="Venus in pisces" href="https://www.platformartprojects.com/venus-in-pisces" coords="798,180,941,199" shape="rect">
    <area target="_self" alt="mars in taurus" title="mars in taurus" href="https://www.platformartprojects.com/venus-in-pisces" coords="295,1326,431,1353" shape="rect">
    <area target="_self" alt="initiation" title="initiation" href="https://www.platformartprojects.com/initiation" coords="464,386,552,416" shape="rect">
    <area target="_self" alt="miracle lake" title="miracle lake" href="https://www.platformartprojects.com/miracle-lake" coords="631,462,748,485" shape="rect">
    <area target="_self" alt="Plains of meaning" title="Plains of meaning" href="https://www.platformartprojects.com/plains-of-meaning" coords="402,536,563,567" shape="rect">
    <area target="_self" alt="state of paradox" title="state of paradox" href="https://www.platformartprojects.com/state-of-paradox" coords="631,564,781,594" shape="rect">
    <area target="_self" alt="house of lorde" title="house of lorde" href="https://www.platformartprojects.com/house-of-lorde" coords="850,481,978,512" shape="rect">
    <area target="_self" alt="glissant forest" title="glissant forest" href="https://www.platformartprojects.com/glissant-forest" coords="879,556,1009,583" shape="rect">
    <area target="_self" alt="happy ending" title="happy ending" href="https://www.platformartprojects.com/happy-ending" coords="237,620,362,652" shape="rect">
    <area target="_self" alt="port of slipperiness" title="port of slipperiness" href="https://www.platformartprojects.com/port-of-slipperiness" coords="586,697,759,724" shape="rect">
    <area target="_self" alt="mount as if" title="mount as if" href="https://www.platformartprojects.com/mount-as-if" coords="664,784,772,806" shape="rect">
    <area target="_self" alt="coast of seduction" title="coast of seduction" href="https://www.platformartprojects.com/coast-of-seduction" coords="487,858,651,882" shape="rect">
    <area target="_self" alt="meaning center" title="meaning center" href="https://www.platformartprojects.com/meaning-center" coords="740,867,880,893" shape="rect">
    <area target="_self" alt="kingdom of myth" title="kingdom of myth" href="https://www.platformartprojects.com/kingdom-of-myth" coords="180,885,332,910" shape="rect">
    <area target="_self" alt="multiplicity archipelago" title="multiplicity archipelago" href="https://www.platformartprojects.com/multiplicity-archipelago" coords="424,964,634,992" shape="rect">
    <area target="_self" alt="derrida island" title="derrida island" href="https://www.platformartprojects.com/derrida-island" coords="663,989,794,1015" shape="rect">
    <area target="_self" alt="secret mansion" title="secret mansion" href="https://www.platformartprojects.com/secret-mansion" coords="897,988,1036,1012" shape="rect">
    <area target="_self" alt="rumi ocean" title="rumi ocean" href="https://www.platformartprojects.com/rumi-ocean" coords="254,976,361,1004" shape="rect">
    <area target="_self" alt="apollo" title="apollo" href="https://www.platformartprojects.com/apollo" coords="534,1146,599,1177" shape="rect">
    <area target="_self" alt="wunderkammer" title="wunderkammer" href="https://www.platformartprojects.com/wunderkammer" coords="685,1131,822,1150" shape="rect">
    <area target="_self" alt="contradiction pole" title="contradiction pole" href="https://www.platformartprojects.com/contradiction-pole" coords="539,1218,708,1245" shape="rect">
</map>

Hi Miss B,

I tired the map, it works and is very cool. Here is code that I got from Insidethesquare  https://insidethesquare.co/
to remove header and footer the you add to the page by clicking on the gear icon for that page and under
Setting>Advanced add this code:
<style>.header, #footer-sections {display:none!important;}</style>
Hope this helps!

Thanks for your help gcart,

I have already added the code below which works but there is too much space above and below the image. I would like the image map to take up the full screen. I would also like to make it responsive on mobile devices as it works well on desktop but not mobile at the moment. Do you know a code I can use to do this? Many Thanks,

<style>.Header, .Footer, .Mobile-bar{display:none !important; }</style>
<style>
.Header--top {
  background:         #000000;
}
.Main {
  background:         #000000;
}
.Footer {
  background:         #000000;
}
</style><style>.Header, .Footer, .Mobile-bar{display:none !important; }</style>

I'm sorry. If the one I sent didn't work I don't know one but I do know it's out there somewhere!
Do a search here on on the internet.
Best Wishes,
George

Add to Page Header

<style>
section.Main-content {
    padding: 0 !important;
}

section.Intro.Intro--has-image {
    display: none !important;
}

.col.sqs-col-1.span-1 {
    display: none;
}

.col.sqs-col-9.span-9 {
    width: 100% !important;
    margin: 0 auto;
    float: none !important;
}
</style>

next, remove space top/bottom inside image

Thank you George for trying to help. I appreciate it.

Thank you Tuan Phan!

That code worked to remove the white corners on the page in mobile!

I have the same issue with another page that has embedded content and it helped there as well but as soon as I add a spacer to move the content more central, the white corners appear again.  This page has an embedded 3D Unity work in it that works on desktop but not mobile. Do you know how I can fix the white corners here (or make the content more centralised another way?) and if there is a solution to allow the 3D content to work on mobile?

This is the link: https://www.platformartprojects.com/kinnari-saraiya-project Password: ks2021

Many thanks!

21 hours ago, miss-b said:

Thank you George for trying to help. I appreciate it.

Thank you Tuan Phan!

That code worked to remove the white corners on the page in mobile!

I have the same issue with another page that has embedded content and it helped there as well but as soon as I add a spacer to move the content more central, the white corners appear again.  This page has an embedded 3D Unity work in it that works on desktop but not mobile. Do you know how I can fix the white corners here (or make the content more centralised another way?) and if there is a solution to allow the 3D content to work on mobile?

This is the link: https://www.platformartprojects.com/kinnari-saraiya-project Password: ks2021

Many thanks!

Add to Design > Custom CSS

html, body {
    overflow-x: hidden;
}