I am trying to put some iframe code in the raw content of my page and no matter what sizes I put in there it keeps on having the scroll along the side.
how would I make the iframe auto-size depending on the screen its on. I don’t want the scrolling bar along the side.
here is my raw content code:
[x_video_embed no_container=“true”][/x_video_embed]
I just tried this change to the code. still cutting off the bottom part of the California map a bit, but I got the scroll to be removed.
its the mobile version that really falls apart. 
raw content:
customizer:
customizer:
.map-container {
position:relative;
padding-bottom:56.25%;
padding-top:30px;
height:0;
overflow:hidden;
}
.map-container iframe, .map-container object, .map-container embed {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
Hi,
Try to remove the width and height of your iframe
Can you provide us your site url so we can take a closer look.
Thanks
i changed the raw content code. picture below.
but california is still being cut off.
the url is: cannabisresearchconsultants.com
but i have it hidden since its not showing correctly.
Hi There,
I can’t find the map in the page. Can you please point me to the page where you have added the map.
also can you please send me your login details so that we can have a look on to the code that you have added.
Thanks
the coding is on the california page.
you can only see it on the back end when viewing in the “visual composer” looking mode.
Hi there,
I checked the California page and could not find the Map. You need to add the iFrame in a test page so that we can focus on that. Add a test page with the iframe and get back to us with the name of the page.
I doubt that we can be of a help on this issue as the iframe itself seems not be the problem. The problem is the content inside the iframe which is loaded from another website. That source seems to be not responsive and getting it cut off seems to be unavoidable.
Thank you.
this is the page with the california iframe on it.
the content inside is supposed to be auto-sized. they suggest using an HTML snippet, but that method does not like “multiple maps” on one page. so I had to use the direct path (to the .js files in the server; uploaded with ftp) for the california map.
i have 4 “raw content” on the page. the regular “html snippet” code and the direct code that gets cut off. youll see the 2 other “html snippet” raw content dont show up.
the html snippet is a plugin called “xyz html”
Hi There,
Unfortunately, your site is not loading at the moment. I got this:
Try checking in with your hosting provider. This article might also help.
that happens from time to time. the website is working fine now.
i am already talking to the hosting provider about this.
Hi There,
You can use the following CSS on Cornerstone > CSS
@media screen and (min-width: 768px){
#mapwrapper svg {
height: 70vh !important;
}}
Hope it helps!
what is this in regard to? the footer in sidebar?
Hi,
Sorry for the confusion, it’s for the map though it will not work since the Map is in iframe.
Please remove [x_video_embed no_container="true"] [/x_video_embed] in your iframe to prevent it from cutting off.
Change
[x_video_embed no_container="true"] <iframe src="http://cannadems.org/maps/interactive-map-of-california/map/index.html"></iframe>[/x_video_embed]
to
<iframe src="http://cannadems.org/maps/interactive-map-of-california/map/index.html" style="width:100%;min-height:1000px;"></iframe>
Hope that helps
this works but it doesnt work at all for mobile.
check out this page on desktop vs mobile. the spacing it too much for the mobile.
http://cannadems.org/test/
Hello There,
You may update the code into this:
<iframe src="http://cannadems.org/maps/interactive-map-of-california/map/index.html" style="width:100%;min-height:100vh"></iframe>
Please let us know how it goes.
the same gap is there underneath the map. same results as before, no change.
Hi there,
As I mentioned before and my guess was right it is not possible to have the map work completely responsive as the source of the iFrame is not responsive.
That is not a theme problem, just test the same code using the default WordPress theme and you will get the same result.
You want a feature that is snot possible, YOu need to contact the map generator developer and ask them to help you make the maps responsive.
Thank you for your understanding.
Ok. I will talk to the person who did the map work.
Thank you for all your help.
Thank you!
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.