Map "design" problems

[tevez15]

Hello

I use Phocamaps since joomla 1.5, and now, for the first time i use j2.5, i have a problem: Some images from the map dont show, or a div have position absolute and change the images.

Exemple:



In J1.5, when you click in marker, show a 'popup' with the name in <h2> tag, now have a div?

Solutions or ideas?

[Jan]

Hi, does the problem occur, if you will use some standard template?

Jan

[Ramin47]

Hi! I have the same problem and i probably figured out where it comes from. In the template css of my responsive template I am using max-width: 100% for the images: img{max-width:100%;}. If I disable the max-width the phocamaps "design" problem disappears. It seems like this is the problem but I can not change the max-width in the template css because I need it for all the images on the responsive homepage. Can I change something in the css of phocamaps or in other files of phocamaps to solve this image problem? Probably rename the img of phocamaps to give them other values? Any other ideas? Would be awesome!

Thanks for the support!

[Jan]

Hi, no idea there, reall cannot say which way makes the images "responsive" in the template

Jan

[Ramin47]

Hi Jan! The width of the map is responsive if the value in the width of the map component is 0. Thats not the problem. The problem is that the images in the maps have "design problems". Like in the picture tevez15 posted: E.g. the bottom and shadow of the marker window is disturbed (under the word "Marcador A") and there are no images the close the marker windows.

The marker window looks fine if I do not use img{max-width:100%} in my template.css! But I have to use it! My question is if there is a way to show the images in the phocamaps correctly without changing the max-width in the template.css? I want to change something in the phocamaps files (css, ...).

Thank you very much!

[Jan]

Hi, the problem is, the image is then displayed with help of javascript in marker which is included directly in the Google Maps (in fact somewhere outside your site), so really no experiences if there can be something changed.

[Ramin47]

Now I found a solution to use PhocaMaps in my responsive template: I copied my template with all the stylesheets (Backend: extensions->templates->templates->my-responsive-template->copy) and deleted the "max-width: 100%" in the new .css file. Then I used this new copied template as the template style for the menu item (article) with the phocamaps.

This solution works for me because I have no pictures on the pages with the PhocaMaps which need "max-width: 100%".

[Jan]

Ok

[bigboytbh]

In the template css of my responsive template I am using max-width: 100% for the images: img{max-width:100%;}. If I disable the max-width the phocamaps "design" problem disappears.

Thank you, you saved me hours of looking for a solution!
Now that we know the reason for it, we simply add this to your template.css :

Code: Select all

#phocamaps img {
	max-width: none;
}

That way, your template stays responsive and your maps show correctly, so you don't need to use a copy of your template for the maps page.
It worked for me.

Good luck!

[egrueda]

Thanks, bigboytb, you're day saver!

P.S I've changed div # by class .

Code: Select all

.phocamaps img {
   max-width: none;
}