Note: to learn more about sharing content from your Meal Garden, check out this article as well 'how your clients can access their content'
HTML is the king
To understand how embedded content is sized on your site, let's look at how everything is displayed on the web. A browser receives what needs to be shown, together with instructions about how things should be rendered, described in a language, called HTML. The meaning of this acronym is not important, but what is important, that no matter how complex the content is, it can not be displayed outside of what HTML can describe. Some of you might be using a sophisticated editor to create websites, some might use templates available from your web hosting provider. In any case everything gets translated into HTML and adheres to it's rules.
Thinking outside of the box is not an option, but the box can grow
At the basis of HTML lies a concept of a box. Everything is displayed in a box. You are familiar with a concept if you ever worked with a text editor, like Microsoft Word. Imagine it having only paragraphs and text boxes with no fancy shapes, like arrows and call-outs, and you get the idea.
So, when something needs to be displayed, a box is created and the content is put inside it. But how big should the box be? HTML provides ability to either restrict the box in size or let it grow, based on inside content and available space.
A box with explicitly set width and height will have that size no matter what, and if the content does not fit, it will be either cut off, or scrollbars will appear.
A box with unrestricted width will take all the width available, which is either the width of the browser itself, or the width of a box that contains the box in question (it is possible to have a box within a box, which in turn can be inside another box and so on, but the concept stays the same). If the content does not fit horizontally, then it will be moved to a new line.
A box with unrestricted height will take as much height as needed by it's content. If there is too much content to be seen at once, then the browser will scroll.
The embedding box has very thick walls
When someone goes to your website, it is being served to that person's browser by your website hosting provider from a particular server. That server is assigned your domain name. Modern browsers are very strict with security and make it hard to display anything that is not from your domain. This is done in order to prevent someone hacking into your site and sending malicious code to the users from the hacker's server.
One legitimate way to display content from someplace else is to use a special iFrame box. iFrame is a box, just like any other box in HTML, except that because it's content comes from another domain, anything inside this box has no access to anything that is outside of it.
In relation to our topic, those thick security walls around iFrame mean, that anything that is rendered inside it cannot change sizes of the outside boxes, that contain iFrame. This is why when a browser renders an iFrame, it is not aware of the inside content yet and will not resize it to fit. That content will be loaded from MealGarden eventually, however the iFrame size will not adjust at all.
To overcome this, we run a script that resizes the iFrame itself, according the loaded content size, right after it is loaded.
So, when embedding content from MealGarden, there are two things to keep in mind:
The embed code, that you copied from MealGarden, should be put into a box that has no size restriction.
To ensure that the iFrame box is resized according to the loaded embedded content JavaScript needs to be allowed on your site.
Technical example
You can pass on examples below to your website designer/coder.
The following code snippet illustrates a case when a recipe is going to be rendered within a restricted to 500 by 500 pixels box with scrollbars:
<html>
<body>
<div style="background-color: #afa; padding: 2em; margin: 1em; text-align: center;" >
<h1>Page Header</h1>
</div>
<!-- THIS IS THE CONTAINER BOX, RESTRICTING RECIPE SIZE -->
<div style="width: 500px; height: 500px; overflow: auto; margin: auto;">
<iframe style="width: 100%;" height="auto" src="https://www.mealgarden.com/recipe/embed/berry-splash-breakfast-smoothie/?bkg=%23fff&head=%233f3f3f&text=%233f3f3f&image=yes&nutrition=yes&rating=yes" id="mg-recipe-iframe_785" frameborder="0"></iframe><script src="https://www.mealgarden.com/static/js/iframe-resizer/iframeResizer.min.70b53b598c4e.js" type="text/javascript"></script><script>iFrameResize({}, "#mg-recipe-iframe_785");</script>
</div>
<div style="background-color: #afa; padding: 2em; margin: 1em; text-align: center;" >
<h1>Page Footer</h1>
</div>
<div>
</body>
</html>
The code snippet bellow illustrated an example, when a recipe will take the whole width of the browser, the whole recipe is rendered and will scroll down as needed:
<html>
<body>
<div style="background-color: #afa; padding: 2em; margin: 1em; text-align: center;" >
<h1>Page Header</h1>
</div>
<!-- THIS IS THE COMPLETELY UNRESTRICTED CONTAINER BOX -->
<div>
<iframe style="width: 100%;" height="auto" src="https://www.mealgarden.com/recipe/embed/berry-splash-breakfast-smoothie/?bkg=%23fff&head=%233f3f3f&text=%233f3f3f&image=yes&nutrition=yes&rating=yes" id="mg-recipe-iframe_785" frameborder="0"></iframe><script src="https://www.mealgarden.com/static/js/iframe-resizer/iframeResizer.min.70b53b598c4e.js" type="text/javascript"></script><script>iFrameResize({}, "#mg-recipe-iframe_785");</script>
</div>
<div style="background-color: #afa; padding: 2em; margin: 1em; text-align: center;" >
<h1>Page Footer</h1>
</div>
<div>
</body>
</html>