Joomla Templates Club 406,261 posts

[shorttimefun Friend shorttimefunJoin date: October 2015Posts: 32Downloads:7Uploads:0]

#904560

Hey, I got the same template on another domain and I am using the same custom.css as on the other domain which is :

.responsiveContainer {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  /*margin-left: -80px !important;*/
} 

.responsiveContainer iframe,
.responsiveContainer object,
.responsiveContainer embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; 
}

.content_listing_large, .content_listing_large .content_listing_large_box {
    width: 100% !important;
    height: 100% !important;       
}

.logo-image a {
height: 50px;
width: 182px;
background-size: 118px;
}

And I am using the same responsive container code which is :

<div class="responsiveContainer">iframe code from google maps here<div> 

On the desktop the map will scroll endlessly to the bottom. See here : http://bangkokmuseums.com/index.php/item/192-about-bangkok-museums

Well even more weird. When you click the direct link to the article on the desktop then the map won’t show up as well. If you go to http://bangkokmuseums.com/index.php and click About Bangkok Museums then the map will show up but like I said will scroll down endlessly

On the mobile phone the map doesn’t even show up.

Greetings, Yannick

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#905324

Hi Yannick,

Did you try to set the height for the embeded iframe? For example:

.responsiveContainer iframe,
.responsiveContainer object,
.responsiveContainer embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 300px; 
}

[shorttimefun Friend shorttimefunJoin date: October 2015Posts: 32Downloads:7Uploads:0]

#906551

Hey Saguaros,
well yeah that fixed the map is scrolling endlessly BUT the article itself still is scrolling endlessly.
And the Map won’t show up on any mobile device.

Greetings,
Yannick

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#907029

Hi Yannick,

Could you specify steps by steps of how you add the container code as above?

[shorttimefun Friend shorttimefunJoin date: October 2015Posts: 32Downloads:7Uploads:0]

#907036

Hi Saguaros,
sure thing. I go to maps.google.com then search for the specific building that I want to be displayed on the map, then I click on "share" then I click on "embedded map" and take that iframe code.
Lets say for example this one

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3875.682541269258!2d100.55820621483029!3d13.737659890356618!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x30e29ee3a0696c69%3A0x70ccb882942e54f8!2sTerminal+21!5e0!3m2!1sen!2sth!4v1459399948809" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

I create a new article or open an article that was previously created and paste that iframe code where I want the map to be. Then I put my container around it and save.
It would look like this in the end

<div class="responsiveContainer"><iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3875.682541269258!2d100.55820621483029!3d13.737659890356618!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x30e29ee3a0696c69%3A0x70ccb882942e54f8!2sTerminal+21!5e0!3m2!1sen!2sth!4v1459399948809" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe><div> 

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#908564

Let me check it further and will get back to you.

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#909269

I replicate the same steps as you mentioned above without any custom css for the container, it works properly: http://prntscr.com/aoa3eu

Try to remove all of your custom css for this container, it works fine with default iframe.

[shorttimefun Friend shorttimefunJoin date: October 2015Posts: 32Downloads:7Uploads:0]

#910036

Well I need to use the custom css to make the map in the article responsive.

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#910047

Try to remove custom css as I mentioned for the container and let me know if you have issue with responsive layout of article.

[shorttimefun Friend shorttimefunJoin date: October 2015Posts: 32Downloads:7Uploads:0]

#919206

Hey Saguaros,
sorry for the late reply the problem is still existent. I removed the custom.css for the container and the map will show up now but is not responsive.

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#919610

Here is how it looks from my end: http://prntscr.com/au1928

How you want it should be?

[shorttimefun Friend shorttimefunJoin date: October 2015Posts: 32Downloads:7Uploads:0]

#919631

This is how it looks on a mobile.

http://imgur.com/a/rZPeg

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#919641

You can add this css rule:

.responsiveContainer > iframe {
    width: 100%;
}

into the ‘custom.css’ file on your site.

[shorttimefun Friend shorttimefunJoin date: October 2015Posts: 32Downloads:7Uploads:0]

#919706

Thank you, Sir that solved the issue.

BUT now somehow I can’t open any article in my "Home" menu. The other menus are fine.

Can you help me in this thread or you want me to open another one?

It is working on the mobile tho, but on the desktop it won’t work.

Thank you, Yannick

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#919727

Its weird as I still can open article on homepage, here is one of them: http://prntscr.com/au3069

[Author]

Posts