Scaling a website across devices


(Lee) #1

I have recently built a website on Hype, it scales well across devices apart from smart phones, where the outer margins seem to be huge, any ideas on how I can make the website content fill the smartphone browser width the same as tablet and desktop?

Here are some screen shots and hype file:

testsite.zip (124.1 KB)


Persistent symbol jumping when cross fade scene transition applied (bug)
(Hans-Gerd Claßen) #2

image

(also, as in screenshot i would personally not scale the content)


(Lee) #3

Thanks, the issue here is that the content is no longer centred when the browser is beyond a certain width, is there a way to centre the content with the above flexible layout settings?


(Jonathan Deutsch) #4

I’m not sure I could reproduce what you’re describing with the document; can you elaborate on which scene and at which browser size the content is not centered?

If you want to have exact margins, you will need to turn on the left/right pins along with the width sizable setting.


(Lee) #5

The scene in question is named ‘biotech’ in the hype file. (the .zip file posted on the first post named testsite.zip)

h_classen’s solution works however when the browser window is resized above 1200px the content on ‘biotech’ scene ranges left as in the screen shot below.

when the content in ‘biotech’ scene is pinned to the left and right, the content is centred but the nav moves when you jump across scenes (the original problem).

here is the content centred when pinned left and right 01


(Jonathan Deutsch) #6

There’s probably a few different ways to tackle it, but you’ll ultimately need the pins turned on to preserve a fixed pixel margin size.

I think you’ll be able to achieve (or closer to it) with changes like:

  • As noted in the other topic, put the nav persistent symbol at the top-level, not within a group
  • Turn on the left/right pins
  • Make sure the top/left position of the persistent symbol is the same in both scenes (and don’t animate it coming in)
  • Uncheck the height scale for the biotech scene

Persistent symbol jumping when cross fade scene transition applied (bug)
(Lee) #7

I think it’s more likely for users to be viewing on smaller devices so il let the page range left for the moment. thanks for the support, having a great time building my site on hype