HTML frame not visible


(francis) #1

I have a partial that includes a frame with HTML code to produce my company google map. The map only shows up on the home page. I am using the same partial on all my pages.
Thank you for any help


(scott williams) #2

Url to a page it’s not working on?


(francis) #3

works on this one: https://www.drsarahshell.com/
not on this one and all the other pages: https://www.drsarahshell.com/medical/adrenal-fatigue/

thank you


(Don H) #4

Did you recently add the map the the partial? Perhaps the other pages didn’t get republished. I don’t see the iFrame code in the page source of the page where it doesn’t appear.

I’d right-click on that page and re-publish it. It that fixes that page, I’d then re-publish all pages.


(francis) #5

I have done a republish all but still doesn’t show. I have also inserted the map separately on another page and still doesn’t show. I would like this map to show up on all pages.
this is the map code I am using:


(LJ) #6

There is no reason this shouldn’t work and looks to me as if the other pages have not published the partial - I have seen this happen sometimes. Try File > ‘Mark all files and resources as changed’ and then File > Republish all files.

This aside, I wouldn’t use the standard embed code from Google as it is not responsive and cuts off on smaller devices. Also be aware that Google maps tend to disappear if you don’t have it registered and get an API code.

You might be better of with in-stacks OpenStreet map stack - I use all the time and its 10/10.

If you want to stick with thee Google embed code you should try to make it responsive: here’s a 2 step process that should work:

  1. In the iframe code you have in the HTML stack, add a DIV class as follows: <div class="responsive-map"> at the beginning of the code and </div> at the end

  2. in the HTML code section of settings (3rd button along) enter the following code into the CSS window:

    .responsive-map{
    overflow:hidden;
    padding-bottom:56.25%;
    position:relative;
    height:0;
    }
    .responsive-map iframe{
    left:0;
    top:0;
    height:100%;
    width:100%;
    position:absolute;
    }

Your map should now be responsive on all device sizes


(LJ) #7

While I’m having a look at the site can I make a suggestion generally. Think ‘padding’.

In particular, I would get a copy of Useful Stack (totally free from Will at Stacks4Stacks). Put your content in Useful stack and then set a maximum site width of say 800px. Also set padding to say 15-20px.

This means the content will not go right to edge on smaller devices (which is irritating to most users) and will also stop at a readable width when viewers are using a large screen.


(francis) #8

Thank you
This seems like a much cleaner presentation. I will see how the map fits into this now.


(LJ) #9

I wouldn’t use ‘fixed size’. Further down you have options for maximum and minimum widths and height. Set the maximum width to something readable on bigger screens. Alternatively the theme itself may offer ‘site width’ options’.

The aim is to have your written content go edge-to edge on small to mid-size items (say 13" screen maximum) but with some padding. For larger screens, the content width needs to stop expanding and stay readable (say 750px max)


(francis) #10

Thank you, appreciate as the usefulstack helps organize my pages.
I set the maximum width to 750 on all pages however when I visit the website I only see the 750 restriction on the homepage.
Thank you


(Don H) #11

I’m still not seeing any sign of the map code in the page source. For some reason, the map code isn’t making to your live site.

You mentioned that you have it in a partial. I would copy the html stack that contains the map code from the partial and paste it directly into one of the other pages. Republish and see if the map appears. We’ll go from there once we know if that works.

I’d also make a small text change somber on that page as well. This will help you identify if the page is uploading and displaying properly.


(francis) #12

Hi Don, I made a small text change (Dr. to Dr) and resubmitted it and the text did not update. https://www.drsarahshell.com/hormone-health/


(Don H) #13

Ok, then there is likely a publishing problem. Can you post screenshots of the publishing settings and also the general page of the inspector so we can see the folder and page name on that same page?

I’m about to head out, but I’ll check in and reply later today. If anyone else spots something in the mean time, I’m sure they’ll jump in.


(francis) #14


(Don H) #15

Nothing jumps out as incorrect. Can you make a text change to the home page and see if that is uploading and displaying changes?

(Sent from my phone)


(francis) #16

I just made a change (Dr. to Dr) on the home page and it published fine.


(Don H) #17

Hmmm, not what I expected!

The screenshot with the page settings is for the home page. Can you post one from the Adrenal Fatigue page?


(francis) #18


(Doug Bennett) #19

Looks like your page is a PHP page. Do you have an index.html file as well?

You should have gotten a warnings message if you did.
Also the page you gave above
https://www.drsarahshell.com/hormone-health/
Is not the same page (folder name) the screenshot is for.


(francis) #20

No HTML

Seemed like I had to have one or the other