Mobile layout zoomed in while previewed

[beng19694064]

Hello, I've just started the process of creating a mobile layout for my site (weartriibe.com) and have run into an issue that's stopping me from getting started. When I add an element to my page then go to preview it to see how it looks it looks different from what I have formatted in my site. specifically, it's zoomed in. I have no idea what's causing it, I turned off responsive page properties and that didn't help. It would be great to solve this so I can move forward with my project. I've attached screenshots of my site in my workspace and in preview mode to compare the formatting.    

[ankushr40215001]

Hey beng,

Could you please try to preview file in the browser from the file menu or the shortcut Shift + Ctrl +E and see if you get the same result.

And I also suggest you keep the responsive property on.

Let me know how it goes!

Regards,

Ankush

[Günter Heißenbüttel]

This can’t work!

You have created an alternate responsive phone layout of 380 px width. An iPhone 5 has a logical horizontal resolution of 320 px. So, the browser shrinks your layout responsively, and these are the consequences …

In general:

I can’t see from your screenshot, but I assume the upper horizontal text frame has a width of 380 px too and is set to responsive width.

If it is 379 px, the text flows to the next line, because there is not enough room in the first line to „house“ it completely. This is exactly the same behaviour, which we are used to from text editors: If the column becomes to narrow, the text reflows.

Perhaps you expect, that the text size shrinks, when the width of the text frame is reduced due to the size of the browser window. This doesn’t happen, because it is undesirable, that font size becomes smaller, when displayed on smaller screens. (Text boxes in Muse only resize horizontally, and grow vertically, when it is not enough room to keep the text visible.)

(One more information: Even if the pixel sizes of a text frame in Muse is completely identical to its rendered representation in a browser, the text itself very often will flow differently. The reason is, that every browser has its own text engine and its own idea about text parameters. Size, kerning, tracking, … are slightly different in every browser and cause, summed up, a different text flow. Muse can’t do anything against this fact. You should be aware of this and leave enough room in your text boxes to take this into account.)

[beng19694064]

Hi, I reduced the site width to 320 pixels but the difference in formatting/size still remains. Still not sure that the reason is. Pictures attached.

[Günter Heißenbüttel]

When I try to reproduce your project, all works fine:

Could you please share this .muse file with us, using Dropbox, CC Files or a similar file sharing service and post the link here? Then we can have a closer look.

You may follow these instructions: https://forums.adobe.com/docs/DOC-8652

[beng19694064]

Adobe Creative Cloud

This should be the link to my .muse file. If for whatever reason you do not encounter the problem there are other computer's I have access to that I could try my file on.

[Günter Heißenbüttel · Accepted solution]

I had a look at your file. Here is, what I get (I colorised the page background for testing reasons):

You see: All is working pixel perfect!

Perhaps UssNorway​ should have a look at your sample file. He is using a Windows system (I am on a Mac). I think, that won’t make a difference, but who knows?

Did you perhaps changed you windows screen resolution? There is a set up option in Muse’s Preferences to deal with non-standard resolution settings in Windows (can’t check this, because it doesn’t exist in Muse for Mac).

By the way:

• Did you try to preview in browser?
• Did you try to publish a free temporary test site on businesscatalyst using the „Publish“ button top right of Muse’s application window and visit the site on a „real“ iPhone 5S?

[beng19694064]

Hello,

I recently began working on an old site file from a couple years ago that I had designed a mobile layout for. For some reason, I didn't have the formatting problem. All was well until I randomly ran into more strange formatting issues. Firstly, when I previewed my site I am now zoomed out instead of zoomed in like before, and when I removed the picture that I thought may be causing the issue the formatting got completely screwed up. The width is also locked at 380px for some reason. I am getting very frustrated with these issues that seem to be happening for no particular reason. Any help out be appreciated. The old file I've been working on now has the label "-converted" next to it, not sure if that info helps.

[Günter Heißenbüttel]

Could you please share a .muse file with nothing but the page, you showed us in your screenshot?

[beng19694064]

https://adobe.ly/2CoZTK4

[Günter Heißenbüttel]

The .muse file, you provided, has all(!) sites (instead of only one as requested) and doesn’t contain the one, you showed in your screenshot (TRIIBE SEATTLE (Phone)).