Calculator on Mobile

Does anyone have luck getting the calculator to display correctly on mobile? I’m unable to scroll to the bottom and see the calculated results section.

2 Likes

Hi there, @Jason_Shoaf and welcome to the Community :wave:

As far as I see, your widget is installed on the Google Sites platform. The thing is that all elements all app elements on Google Sites are being converted into iframe format, which causes incorrect displaying.

Iframe calculates the height of the block on mobile based on its size on the desktop. So, to make the widget look good on mobile, you need to stretch the widget in its height on the desktop.

Also, I need to say that an empty space might appear on the desktop below the widget, but it is the only workaround we can suggest in this case. I am really sorry about this inconvenience!

Let me know if this explains things or if any further assistance is needed :slightly_smiling_face:

Thanks for the info Max.
I’ve tried stretching the height by dragging the window down as far as I can and it still doesn’t fully display on mobile. Is there a different method that you’re suggesting for changing the height?

Also, I don’t really care how this looks on the desktop. I just want it to work on mobile, if possible.

Jason

1 Like

Could you please send me a link to the page where your widget is installed? I’ll gladly look into this :slightly_smiling_face:

https://www.jshoaf.com/health-wellness/health/tdee-calculator

1 Like

Thank you!

I’ve shared it with the devs and will get back to you tomorrow :slightly_smiling_face:

Thank you for waiting, @Jason_Shoaf :wave:

We’ve made the widget scrollable on mobile using this code in the Custom CSS field on the Settings tab of your widget’s settings:

[class*='WidgetBackground__ContentContainer-sc'],
[class*='WidgetBackground__Content-sc'] {
  height: max-content;
}

Check it out and let me know if you like the result :wink:

That’s perfect! Thank you.

2 Likes

Glad to hear that you like the result!

If anything else comes up, we’re here to help :wink: