Swarup,

How to Fix Wolfram Cloud Embedding Issues

The issues you are encountering are common when using an iframe to embed Wolfram Cloud content, especially when that content is designed to display a complex, fixed-layout graphic like the Nutrition Label.

The recommended solutions involve two main strategies: modifying the Cloud deployment and adjusting the iframe and its surrounding HTML.

1. Fix Mobile Visibility and Sizing

The problem is that you are using fixed width and height attributes on your iframe (width='800' height='400'). On a small mobile screen, an 800-pixel wide iframe will be cut off.

You should switch to using relative sizing for the width, and use CSS media queries for better responsiveness.

Corrected HTML/CSS:

<section class="py-2" id="Types">
  <div class="container">
    <iframe
      style="width: 100%; height: 600px; max-width: 800px; border: none;"
      src='https://www.wolframcloud.com/obj/modakindia/Published/apple.nb'
      frameborder='0'>
    </iframe>
  </div>
</section>

style="width:100%:" Tells the iframe to occupy 100% of the available horizontal space of its parent container. This is the key to fixing the mobile issue.

max-width:800px; Ensures the element doesn't stretch too wide on desktop monitors

height: 600 px; A larger, fixed height is often necessary for the Nutrition Label to display all rows without clipping.

border: none; Removes the standard iframe border for a cleaner look

2. Fix Font Size and Missing Data

The font size and missing data issues stem from the fact that the notebook, when published and viewed as a webpage, might be stripped of the necessary styling and formatting rules.

The most reliable solution is to replace the notebook with an APIFunction or use Export to generate a static image.

A. Use a Dedicated APIFunction(Recommended)

Instead of publishing the whole notebook, you should convert the output to a specific Wolfram Language function, which is designed to be embedded cleanly.

Wolfram Language Code

1. Use the WolframAlpha function to retrieve the nutrition data in a structured form.
2. Use ExportString with the target format set to PNG to convert the generated label into a raw image, which preserves all formatting and text sizes exactly as intended.

3. Wrap this in an APIFunction for clean web integration.

   APIFunction[
     {"food" -> "String"},
     ExportString[
       WolframAlpha["nutrition label: " <> #food, {{"NutritionLabel", 1}, "Image"}],
       "PNG"
     ] &,
     "Image" (* Set the output format to image *)
   ]
   

Deploy this function (e.g., as nutritionAPI), and then use the resulting API URL in your iframe. Since the output is a single image, it will scale cleanly on all devices and preserve the font size and all data elements perfectly.

Option B: Use Pane in the Notebook

If you must keep it as a notebook output, you can try wrapping the entire output in a Pane with a fixed width, which sometimes forces the Cloud's renderer to respect the dimensions:

Pane[
  = Food Nutrition Label: Apple,
  {{800, Automatic}, Automatic} (* Set fixed width of 800 *)
]

Redeploy the notebook with this change. You still need the responsive iframe from Section 1, but this can help ensure the content itself fits within the new sizing.

Best wishes for continued success with your website!