Graphic misplaced online

Hello, I have the following problem with Sparkle 5: I have a page with a length of 8381px. Below I’ve placed a graphic to the left of some text. In the Sparkle window, the graphic is in the right place (1). Also in the Preview window (2). Once published, this graphic will appear significantly shifted (3). This happens in all browsers on the computer and mobile devices. What could be the reason?

Sorry for my bad english :grimacing:

Mmmm… Is the graphic within the device’s width limit or is it a new Sparkle 5 Background Shift?

Hi, thanks! Yes the graphic is within the device’s width limit. I don’t know about the new background shift yet. I have to check that tonight.

Hello :wave:t2:

Does this happen on the mobile version of the site or on the desktop version as well?

In both versions. Macbook under Safari and Firefox. As well as on the iPad and the iPhone. Everything is correct in the Sparkle app preview for both mobile and desktop versions.

It might be best to send us a link so we can view your website to better get an understanding?

The site is under construction and still has a password. I’ll try a few more things tonight. If it doesn’t work, I’ll send the temporary access data.

Many thanks for help!

2 Likes

Hello, I’ve tried many things, but it doesn’t work. I have now built a test page and put it online. I also attach the original .sparkle file here.

Update

Problem solved!

Hi.

Do you have any autoscale options enabled? For mobile device “fit to screen”?
It looks like the text has shifted.

Mr. F.

1 Like

Hello,

You are working with “PCs and landscape tablets” devices and have chosen scaling for desktop computers. I recommend doing the opposite, as it will solve your problem.

Here’s how I work with my websites:

  • Ultra-wide desktop computers: Unpublished
  • Desktop computers: Custom layout
  • PCs and landscape tablets: Automatic scaling
  • Portrait tablets: Automatic scaling
  • Landscape smartphones: Automatic or custom scaling
  • Portrait smartphones: Custom layout

I also recommend disabling automatic scaling on mobile devices, as it can cause such issues. To do this, go to the site settings and then navigate to “Miscellaneous.”

Apologies if the translation is not accurate.

1 Like

It works!

Thanks @all! My special thanks go to @Mr_Fozzie and @Allan for solving the problem.

Greetings…

2 Likes