Public Forums 71,145 posts

[beasleybiz Friend beasleybizJoin date: May 2015Posts: 5Downloads:0Uploads:0 Thanks: 3]

#206374

Using Purity III with the Corporate template I have added the JA Image Hotspot and have a picture displayed. I have not yet added any hotspots, but I can’t get the image to center. I modified line 12 of the /modules/mod_jaimagehotspot/assets/css/style.css as referenced here: http://www.joomlart.com/forums/topic/how-center-the-map/ to this
.jai-map-container {
display: block;
margin-left: auto;
margin-right: auto;
max-width: 100%;
position: relative;
}
but it doesn’t help. I think it may be because of the position I am using (slideshow). That is the only position I could use where it doesn’t compress the image, and puts it above the article text. Any and all help is appreciated.

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#570719

Which element in your site is the one you’re trying to center the image?

[beasleybiz Friend beasleybizJoin date: May 2015Posts: 5Downloads:0Uploads:0 Thanks: 3]

#570720

http://www.raymacac.com/index.php/spray-foam/common-air-leaks
JA Image Hotspot in that page.

[beasleybiz Friend beasleybizJoin date: May 2015Posts: 5Downloads:0Uploads:0 Thanks: 3]

#570726

I moved the position to masthead and like that much better than in the slideshow position. It is not centered on the page, but it is centered above the article content.

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#570731

You could try something like this . . .


.jai-map-container img {
margin-left: 20%;
}

1 user says Thank You to TomC for this useful post

1. beasleybiz

[beasleybiz Friend beasleybizJoin date: May 2015Posts: 5Downloads:0Uploads:0 Thanks: 3]

#570733

I will give that a try. I have another issue as well. I thought I could just live with it as long as it was centered over the article text, but once I added a hotspot then saved I can see the tooltip, but the front end is not matching the back end placement. It is showing too far to the right on the map. I am going to try resizing my image to match the world map sample image to see if that fixes the tooltip placement, if not then I may just re-think using this module altogether. It is really nice work, but not absolutely necessary for what I am doing.

Edit: I adjusted the image size to match the worldmap sample image and changed to the new image, re-made the tooltip and have the same issue.

[beasleybiz Friend beasleybizJoin date: May 2015Posts: 5Downloads:0Uploads:0 Thanks: 3]

#570741

Moderator, please mark as closed as I have decided to go in a different direction. Thank you @tomc for your help.

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#570743

Glad to have been of whatever assistance I could . . . All the best with your continuing site development.

[Author]

Posts