Copy link to clipboard
Copied
Hey folks I could really use some help here - I have a page that I created in muse and my client needs it to display as an interactive responsive iframe in another site within a Wild Apricot platform page.
I'm a designer with no programming expertise and this problem is making me crazy. It concerns the height of display when the screen sizes down responsively. I'm getting a massive white space at the bottom of the page that I created in Muse when viewed on mobile devices. Maybe this is an easy fix that I'm completely ignorant on how to go about making?
I gotta make this work - deadline approaching rapidly. Thank you for any assistance!
My original page is here:
Here's the code I am using to bring the iframe into the client site
<iframe src="https://bygauntt.com/nmmap/"width="100%" height="912" frameborder="no" scrolling="no"></iframe>
I set the height to 912px but when the browser is resized tons of white space shows up at the bottom!
And below are two screen grabs showing the responsive display results
Full width in browser - looks great
Narrow width in browser - tons of white space below
OK Folks - here's what I did so far. Pretty exciting (hopefully)
1. Recreated the Muse page
2. Turned off Sticky Footers
3. Made all assets centered
4. Adjusted bottom of page and footer placements
Brought the page into the new Wild Apricot site as inserted html iframe using the following code (it's not prefect but I'm getting there)!
<style>
.embed-container { position: relative; padding-bottom: 100%; height: 0; overflow: hidden; max-width: 100%; }
.embed-container iframe, .embed-container object,
...Copy link to clipboard
Copied
Hey idezin,
To me it looks like the white space is followed due to the forced page height.
If I change the height to "auto" or "100%" it does not work. therefore it is worked as coded.
The 912px height is covered leaving a blank space in the bottom.
Therefore, I would suggest you to get the code rectified.
@community what are your thoughts on this?
Thanks!
Ankush
Copy link to clipboard
Copied
Ankush - I tried the same solutions too - "100%" and "auto". Neither worked correctly. Argh.
Copy link to clipboard
Copied
The space is that extra height only.
If you drag the scrubber inside your Muse file, there also yo can see that empty space in the height of iframe.
I din't even see any scope in modifying the current code, as i guess the problem lies in source of that code - https://bygauntt.com/nmmap.
Not sure where can we proceed further.
Lets see if any other community member has any insight for your issue.
Thanks!
Ankush
Copy link to clipboard
Copied
Ok thanks - hopefully someone knows more about this than I do.
I have a suspicion this might need a css container to control it and to be honest, I have no idea how to do that!!
Blair
[Email signature removed by moderator.]
Copy link to clipboard
Copied
try this one
Copy link to clipboard
Copied
Thanks for the suggestion Ussnorway - unfortunately I don't need to bring the Muse page that I have created into a Muse environment as an iframe. I'm trying to bring the muse page into another site inside a dashboard by inserting the html iframe code.
"<iframe src="https://bygauntt.com/nm10/"width="100%" height="906" frameborder="2" scrolling="no"></iframe>"
I just need to get the page I created to display the smaller responsive breakpoints without all the extra white space at the bottom. Setting height to "auto" or to "100%" doesn't do it. It just truncates it. Looks great when I set height to "906px" but of course that locks the height into that size when displaying the smaller breakpoints.
I have tried several edits on the original Muse page - including resetting footer positions on all breakpoints, and even disabling the master completely but the white space at the bottom is still there with each solution I try out.
Updated Version
Copy link to clipboard
Copied
I think that the mulib shared by Ussnorway​ works totally well as we can't do any thing much when it comes to embedded code in Muse.
However, the only difference I found is the vertical scroll bar appears even if "hide browser scroll" is enabled.
Ussnorway​ can we somehow disable the scroll bar and force the map to be on full width mode?
Thanks!
Ankush
Copy link to clipboard
Copied
ankushr40215001 wrote
Ussnorway can we somehow disable the scroll bar and force the map to be on full width mode?
no, what we are really doing is saying "we don't want a scroll bar but if you insist then a max of one please" ... now Pavel Homeriki may know some workaround but I tend to hide the scroll bars under my design
* his base map is only interactive at size 721 and above... at 720 < his server offers up a single image and imo this is the real cause of the white space but that is not a Muse issue
Copy link to clipboard
Copied
OK Folks - here's what I did so far. Pretty exciting (hopefully)
1. Recreated the Muse page
2. Turned off Sticky Footers
3. Made all assets centered
4. Adjusted bottom of page and footer placements
Brought the page into the new Wild Apricot site as inserted html iframe using the following code (it's not prefect but I'm getting there)!
<style>
.embed-container { position: relative; padding-bottom: 100%; height: 0; overflow: hidden; max-width: 100%; }
.embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
</style>
<div class='embed-container'>
<iframe src='https://bygauntt.com/nm13/' frameborder='0' webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</div>
Still trying to get a little white space off the top of the full width!
Copy link to clipboard
Copied
idezin wrote
Still trying to get a little white space off the top of the full width!
Muse 2018 has a 50 space at the top of page reserved for Masters... if you have no Master page then there will be a blank space at the top of your Muse page
Copy link to clipboard
Copied
OH. Crap.
Copy link to clipboard
Copied
Thanks everybody!