Rendering problems on small device

Exporting & Previewing
1

Hi there guys

I was wondering if anyone out there has any rendering issues when exporting the project.

For example when drawing a button on the canvas it appears correct on desktop width window BUT when viewing on a mobile device it suddenly reduces its veritcal height , the same thing is happening to other elements on screen but not all of them.

Here is the image drawn correctly - although work in progress, notice that the button appears correct and the black rectangle around Method A

Now look at the same scene rendered on an iphone, the button is wrong and so is the black rectangle around Method A

All that was done to create this was drawing the element onto the screen (once selected) from the dropdown palette, and then immediately exporting. Plus other elements seems to be shifting their coords when displayed on smaller device.

Does anyone have the same problems?

I brought Hype specifically to create these types of things to be displayed across multiple screen sizes, but on my first attempt I cant even get a project to render with consistency across 2 screen sizes.

Would anyone have any suggestion please?

2

My guess is that this is a difference in how browser are interpreting ‘line-height’. Try this:

Select groups of text that are the same font size
Switch to the Typography Inspector
Adjust the ‘line-height’ slider and use a line-height value that places the text at the ideal vertical position.

Let me know if this improves the position on the other device.

Also can you share how you made this element?

3

Hi thanks so much for getting in touch

I saw Hype as an integral aspect of my work flow - so these problems are worrying

Regarding that element

  1. Select the Elements dropdown and then pick “button” ( as below)

  2. Button is placed on canvas - which is then position, for this example picture no resizing or text change was done for simplicity ( as below )

  3. Now export

    Pasted image949×480 146 KB

  4. then view on device ( see below )

I must note that the actual border around the “Method A” is simply round rectangle place above the text - so that its position can be animated.

I tried the line-height thing and loads of other things - failed and asked for help

Thank you

4

What device? Would be super helpful to know this key piece of info :wink:

5

Hi there

The device is an iphone 6s plus, however, I have little more info.

When I actually use reflect it renders perfectly however once deployed on to a site via ftp - thats when things start messing up ( when site is viewed on phone )

I have inspected the actual element and found the issue but have no idea why its happening

Pasted image1576×919 581 KB

If you notice the highlighted element ( the button div ) has a height of 15px however within Hype the button height is 29px - the default given when element is drawn onto canvas.

Any ideas?

6

sorry I also forgot to mention this is now happening on the mac using safari.

7

Now we're getting somewhere! Ok this is a known issue related to a box-sizing property. If you have CSS included on the page forcefully setting a 'box-sizing' property to every element, you can add this to the head of your document somewhere to override it:

.HYPE_element {
        -webkit-box-sizing: content-box;
        -moz-box-sizing: content-box;
        box-sizing: content-box;
 }

In your site, the offending CSS is on line 1 of icon.css:

* , * :before, * :after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

The above CSS is overriding the browser default, which is content-box.

This is common on Wordpress sites and we should probably set a more forceful style to avoid this issue.

2 Likes
8

Thank you Daniel

GO Team Tumult !!!

Sorry for making this so long winded - I should have been more explicit from the start, but the whole Hype thing is brand new and I didnt know if I was doing something wrong!!!

When I finish my work I will post you a link so you can see what I did, Im using interactive diagrams for normally boring technical prose.

Thanks again

3 Likes