Mobile Portrait layout is cropping improperly

Responsive
1

Hello,

Please help me! I am trying to get my Hype HTML5 animation at www.mltcreative.com/greeting to display properly on both desktop and mobile (portrait) formats. It is responsive and the breakpoints seem to work - however when i view the animation on my phone it is cropping the animation and chopping off the right side. Please help me, I need to fix it ASAP.

Note: Used the Hype iPhone layout (breakpoint at 320px)

Thank you so much!

3

It looks like that page is showing the Hype document at a width of 271px, so some is being cut off.

The Wordpress theme you’re using is placing your document within a container that becomes smaller than your layout due to padding on either side.

You have a few options:

  1. You could create an additional, smaller layout
  2. You could place this on its own page and Have Hype take care of the details, not embedded within a Wordpress site.
  3. You could adjust this line in the head of your document (this would require editing the wordpress theme) :

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

… so that is instead is written as:

<meta name="viewport" content="width=device-width, initial-scale=.7, maximum-scale=1">

or

<meta name="viewport" content="width=device-width, initial-scale=.7, maximum-scale=1">