Jump to content

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

Recommended Posts

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!

Link to comment
  • Replies 8
  • Created
  • Last Reply

Top Posters In This Topic

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>

Link to comment

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>

Link to comment

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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!

Link to comment
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.