Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

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


miss-b

Question

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
  • Answers 8
  • Created
  • Last Reply

Top Posters For This Question

8 answers to this question

Recommended Posts

  • 0

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
  • 0

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!

Link to comment
  • 0

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
  • 0

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.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0

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
  • 0
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.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

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...