Images Move in Preview and from monitor to monitor
Jan 23, 2024
We have run into an issue with our courses. When I place an image and line it up and then preview it, the image has moved by 1-2 pixels. I can then fix it, but when my colleague previews it on her monitor, they have moved another 1-2 pixels. The result is that we cannot get them images to sit exactly where we place them. This is an issue in multiple files and we have not found a way to make it stop. Is this a common issue?
See attached example. On the articulate slide, it shows the image overlapping the bar at the top, but when you view the preview, it shows the image 1 pixel under the bar, which then creates a white line between the two, plus it now overlaps at the bottom of the page instead.
13 Replies
Use relative sizes: Make sure your images and image containers use relative units (such as percentages or ems) rather than fixed pixels. This can help avoid display differences on different screens.
CSS Reset: Use CSS reset styling to reset default browser styles and prevent sudden shifts.
And what would I be changing in order to make them relative? I've found the percentage for them and the aspect ratio is locked. I would have thought this meant that the relative percentages should remain locked into that ration regardless of screen view. I've attached the image settings. Can you tell me what I'm need to adjust on this?
Hi Kristin!
Happy to jump in here!
Generally, we suggest using the course resolution as a guide when resizing images. For example, there is no need to insert a 6000x5000 image into a course with dimensions of 720x540. The image will scale down to fit the dimensions of the course. Everything gets optimized for web delivery when published.
A helpful reminder is to use images and videos that don't need to be resized.
Also, if you're comfortable sharing the .story file, I'd be happy to take a closer look at the image settings and test the behavior on my end. Feel free to upload a copy here in the discussion or privately through a support case.
Thanks for the response. I do still have questions as to why the images move from the slide to the preview. Why isn't what I see on the working slide the same as what I see in the preview.
Kristin Knepp | Lead Visual Designer
503-345-9261
kknepp@visionem.org
[cid:image001.png@01DA5040.3F9A8070]
I remember seeing that problem when I created a crossword with many small boxes. Everything lined up in the slide view but some boxes shifted by a pixel in the preview. So I had to misaligned boxes in the slide view to match an aligned preview. Go figure.
Hello Kristin!
It is hard to tell why the slide view and preview aren't matching up without seeing your .story file. Do you mind letting us test out your project? You can share it with us privately in a support case.
Sorry for the trouble, Richard! If you'd like our Support Engineers to troubleshoot your file, they are happy to take a look. You can share with us in a support case.
Here is a sample of the pixel issue. Slide Dimensions 1000 x 576
I have 10 rectangles with a width of 100 pixels each. In slide view looks great, all are lined up. In preview, I see the boxes appear out of alignment as you can see the white background behind the rectangles.
Included the SL file.
Hi Richard!
Thank you for sharing the .story file! I've noticed the same on my end with your project, however the lines are in different spots. Here's a screenshot of what it looks like on my end. This makes me believe it is related to the responsive player in Storyline 360.
Are you noticing the lines are different when publishing the course and resizing the browser window?
Yes, the lines do move if you resize the window. Normally, I view in full screen mode. This makes for a real problem when you are designing elements that should line up.
Hi Richard,
Thanks for the additional information. I went ahead and opened a support case on your behalf so we can have our support engineers take a look at the behavior you're experiencing. We'll continue this conversation there, and someone from our team will be in touch shortly!
Thanks Jose
Hi Richard!
Glad to see Joe has been helping you out!
I noticed that you connected with my colleague Chester through your support case. It looks like Chester shared this behavior is related to a known bug causing objects to shift slightly when viewed on different zooms.
I've linked this discussion to the bug report and will provide updates as soon as a fix is in place. Thank you for your patience. Sorry if this has been slowing you down!