Site Displaying Different from Preview

[paulwolf0101]

Hey Everyone,

I recently published my site and there is a visible difference from the way it displays when I would preview my site during the build and now that I have actually uploaded it to my FTP. I labeled pages with the breakpoint width so I know it is still using the same breakpoint, but my header and text are significantly larger on the published site. I'm not sure if anyone else has had this issue or knows what might be causing it. I have attached the images below. It is a little difficult to tell the size difference from the photos but it is significant. I have checked everything with inspect and the font sizes say they are the same.

This is the image from the site when I preview it.

This is the image from the site when I go to the published version.

Not sure why this is happening but hope someone can help.

Thanks,

Paul S.

[fotoroeder]

Is it that the size from 1053 should be at 1280 as well?

Watching it on 17" screen MBP it doesn`t look too bad, though .

To inspect, if there´s really an issue, we would need the .muse, just one page with maybe a placeholder(wireframe) and your logo.

It seems that you have set a difference in size from 1280 to 1053 for font size and size of the logo.

Possible, when you copy and paste from one site to a new one, that you find the error by yourself.

Share it via dropbox or CC or similar filesharing

Best Regards,

Uwe

[paulwolf0101]

I have set the sizes and font different but it is smaller going from 1280 to 1053. The only reason I did that was because there were issues with a widget that I am using on that page. It doesn't really explain why the preview would be smaller than the site once it was published. I'm not sure what you mean by "Watching it on 17" screen MBP it doesn`t look too bad, though ."

I have a 15" MBP and when I preview the site, like it said, all of the text appears smaller and the header is a lot smaller. When I inspect the properties from the preview and the site that I published, all of the font sizes and header dimensions are the same. For some reason it is just appearing larger on my screen.

[fotoroeder]

I'm not sure what you mean by "Watching it on 17" screen MBP it doesn`t look too bad, though ."

I have a 15" MBP and when I preview the site, like it said, all of the text appears smaller and the header is a lot smaller. When I inspect the he inventorproperties from the preview and the site that I published, all of the font sizes and header dimensions are the same. For some reason it is just appearing larger on my screen.

With that I just wanted to say, that on larger screens with 1920 px I don´t see a significant huge size of menu and logo.

To get deeper, we would need a .muse, reduced to your logo and menu. For menu reasons just empty pages.

Instead of pictures, rectangles or the slideshow out of the box from muse.

Did you talk to the inventor of the 3rd party widget? What does the widget do for your site?

Best Regards,

Uwe

[paulwolf0101]

The widget that I am using is underneath the header so I don't think it is what is affecting this. I attached a site with the header and the menus that I am using and made all of the breakpoints the same. It's weird that it is making it larger now that I have published it to my FTP, because even when I published it to business catalyst I didn't have that issue.

Thanks for taking the time but I am really not sure what could be causing this. Hopefully you can find it. I'm just not sure because it only happened once it was live.

Dropbox - Forum_Test.muse

[fotoroeder]

If you watch your menu properly at 1280 you set the font to "14" and at 1053 it is set to "13". If so, forget what I say.

The header is set at 1280 to height of the white rectangle, at 1053 it is not:

Don`t know if this causes the issue - but just to inspect, I detect

Breakpoint at 320 is not necessary, what to you want to break? Nokia 6110?

Header between 768 and 550 differentiates from 60 to 70 (strange to make it larger in smaller breakpoints, though)

at 480 it is set to 51px

at 968 it is set to 83px

I´m not sure if this helps, as it seems to be no difference between design view at 100% and the browser. Your sizes change strange between breakpoints on master.

Best Regards,

Uwe

[Günter Heißenbüttel]

If i understood correct, you are seeing differences between the sizes of your header objects.

I checked your test site and your published site on macOS, Safari, Chrome (latest versions) comparing it to Muse’s preview and Muse’s layout mode.

Generally, there is no difference in size of your header at all. The logo has exactly the same dimensions. You can test this by exporting your site as HTML, opening the „leaf_vector_large_web.png“ in Photoshop and compare the exported instance to the „instance“ displayed in your browser and/or comparing the pixel size of the image, placed in Muse (81 x 105 px), with the size of the exported/displayed image (81 x 105 px as well).

Interesting:

If I export as HTML and compare the logo size of the“Leaf“ image, displayed in Chrome and Safari, there is no difference at all.

If I compare it to the „Leaf“ image on your published site („jgsdesigns.com“), the image on the published site is larger (117 x 151 px).

Additionally: There exists a very subtle difference in the rendering of the text elements (JEFFREY …, LANDSCAPE …). But these differences are unavoidable, because every browser (and Muse) uses its own text engine, which interprets the text attributes (size, width kerning, …) in its very own way.

[paulwolf0101]

That's very helpful Günter thank you! I tried inspecting the elements and the leaf from the published site the text was reading it was the right size but it appeared larger. I guess that is because of the rendering like your saying, but why has it been appearing smaller during the previewing and the published site on business catalyst? Also could this be fixed at all or is it just something that I am stuck with? im pretty sure that the other breakpoints look pretty good as far as accuracy of the preview sizes it's just the 1280 breakpoint and sort of 1053.

[Günter Heißenbüttel]

Not sure, if this is a real problem ir a caching issue! Please publish your site as a free test site at Businesscatalyst.com (the "Publish" icon top right of Muse's application window). Then have look at this site, save the icon, which you see, to your machine, examine the pixel dimensions and compare it to the pixel dimesions of the image in Muse. Then tell us the result.

[paulwolf0101]

Yeah I thought it might be a caching issue but I cleared my cache and everything completely, republished it and still get the issue. I will publish it in business catalyst when I get home and get back to you. I didn't have the issue ever when I published it on there everything looked exactly the same on there and from preview, it was only in my site when I put it live that this issue arose. But I'll let you know a little later.

[paulwolf0101]

Hey Gunter,

So I published it to business catalyst again and did what you said. The dimensions of it after saved are also 117 x 151. It's weird because the business catalyst site shows it how I have always been previewing it and seeing when I had published it on there before.

(The site is jgsdesigns.businesscatalyst.com) In muse the size I have it set to is 85 x 105. I am not sure why even in business catalyst it appears smaller than the published site on my FTP.

Can you take a look at the business catalyst site and see if it visually looks the same as the FTP site for me if you have a moment?

The reason I find it to be such an issue is because I have been using Muse and designing based on the visual aspect of everything, which I think is the idea behind Muse. But now that it is published and appears different it's very frustrating. Hopefully you can help me figure it out and again thanks for taking the time and your help.

[Günter Heißenbüttel]

Your logo appears with 117 x 151 px.

One more test:

Delete all elements from your site except the header bar (just as you did in the .muse file you uploaded to Dropbox) and upload this site to Dropbox. What pixel dimensions has the leaf.png now?

[paulwolf0101]

The pixel dimensions for the leaf are now appearing with the proper dimensions of 81 x 105. I deleted everything off the site except the for the header from the home screen master page. Did you still want me to upload it to dropbox?

Do you know why this might be happening? Is something else on the site somehow enlarging the file?

[Günter Heißenbüttel]

In this case, you should find the culprit by yourself.

Since I never heard of something like this happening using standard Muse, I think, there is a 3rd party widget causing this behaviour.

My proposal: Delete one 3rd party widget after the other, upload your site after every step to Businesscatalyst and look what happens.

[paulwolf0101]

Okay sounds good thanks Gunter. I was going around deleting things and trying to figure out which it might be, and ended up taking a look at the asset info because I couldn't find it. When I check the information for the leaf.png, it says that the unsampled size is 117x151 and the page item size is 85x105. I have another instance of the same png where its dimensions listed in transform are 117x151. I resaved the png that is in the header with a different name and replaced it but it still makes the header appear larger even though when I save it it says that it is 81x105 now.

[Günter Heißenbüttel]

I don't understand at all. The assets panel only reflects, what is the case. The infos you find there can't be the reason For the problems you encounter.

If the complete page shows your problem, but the isolated header doesn't, the reason for this "misbehaviour" is likely to be found in the other page elements.

Please give us via Dropbox a .muse file with one single page, where this problem occurs.

[paulwolf0101]

I was just saying that in assets it said that the unsampled file was 117x151. So I had made a new one with the 85x105 pixels and put it in and when I saved it to my computer that is what it displayed in info with everything still on the site. But it was still doing it.

So I deleted every single page except for the home page and master for that page. I tried publishing it to m FTP and it still did it. I took everything off of the home page and master page and it still did it. I made sure everything that wasnt being used and all of my graphic styles and text style were deleted and it still did it. I just left the text the "Jeffrey Smith Landscape Architecture" up and deleted everything else from the header. It still enlarged the text. I can't seem to find what could be causing it if there was literally nothing on the site.

This is a screenshot side by side of the site on the FTP and on business catalyst with everything on the site and then with nothing.

(Just ignore that the leaf isn't locked to the top left that's still what it looks like when it is)

[Günter Heißenbüttel]

As I already said: „Please give us via Dropbox a .muse file with one single page, where this problem occurs."

[Günter Heißenbüttel]

No help for the helpers?

[paulwolf0101]

Hey sorry not sure how I missed this email. I have attached my Home page with the master for it. Thank you for your help.

Dropbox - Jeffrey Muse Site_Single Page.muse

[Günter Heißenbüttel]

This is getting too confusing for me now! Could you please tell in simple, short, clear words, what your issue is?

I have got your file. If I am right, we are talking about the „LEAF_VECTOR_LARGE_Header.png"

• In breakpoint 1280 px the image container is 81 x 105 px.

• The image itself has the same dimensions.

• The exported image ("Export as HTML“): 81 x 105 px.

• The image, displayed in Safari: 81 x 105 px

• The image, displayed in Chrome: 81 x 105 px

Now please tell me: What is wrong?

[paulwolf0101]

Hey Gunter,

So the issue is still the same. The site I published to my FTP makes the

header and text larger than it actually is. When I preview it in business

catalyst and preview through Muse, everything is smaller. I am not sure if

you have the ability to publish it to an actual FTP, but the issue is not

the size of the leaf png. It is that they appear larger on my FTP published

site.

If i publish it to business catalyst and download the png like you said,

the dimensions are the same as the published FTP, but the size of both

headers are significantly larger, as I had shown in the previous response

with the browsers side by side.

On Fri, Jun 30, 2017 at 2:51 AM, Günter Heißenbüttel <

[Günter Heißenbüttel]

You wrote "So the issue is still the same." For my, there is no "issue" at all. That is the sense of my last post.

Because you answer that late, I have already deleted your file again. I think, I won't load it again only to wait again for weeks with these data on my machine.

Do you have an actual link to your site? I have tested, what is possible, and all works well. Just read my last posting.

Are you sure, you didn't configure a text or image magnification in your browser? In Chrome for example this is possible.

(If you look at your screenshots, you'll see, that not the header is bigger, but all other visible elements as well.)

[paulwolf0101]

Im sorry it took so long but every time I tried to load the forum page I

kept getting an error and so I tried contacting adobe and they told me to

just respond from the email. I don't have anything set in my browser that

should be creating the difference in size.

The site is: jgsdesigns.com

The business catalyst is: jgsdesigns.businesscatalyst.com

When you compare the headers in the two is there a difference in the sizing

of the header for you?

I thought I provided the actual site previously for you but I guess not

sorry about that.

On Thu, Jul 6, 2017 at 10:32 AM, Günter Heißenbüttel <

[Günter Heißenbüttel]

What more should I say?

Here, the renderings of your two sites (your server, Businesscatalyst) as they appear in Safari and Chrome:

Do you notice any difference? I don’t.

And: your statement "I don't have anything set in my browser that should be creating the difference in size.“ might not be enough! The question isn’t if you have „set anything“ but if there is set anything …"“. Perhaps caused by an application glitch or by using a short cut inadvertently. Did you ever try to use a different browser and check your site there?

I can’t do anything more, because I can’t reproduce your issues.