Forum Discussion

KristinKnepp-ee's avatar
KristinKnepp-ee
Community Member
11 months ago

Images Move in Preview and from monitor to monitor

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.

  • LiluBraige's avatar
    LiluBraige
    Community Member

    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?

    • StevenBenassi's avatar
      StevenBenassi
      Staff

      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.

  • 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.

    • LaurenDuvall's avatar
      LaurenDuvall
      Staff

      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. 

  • 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. 

  • 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.

    • LaurenDuvall's avatar
      LaurenDuvall
      Staff

      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.

    • JoseTansengco's avatar
      JoseTansengco
      Staff

      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!

    • StevenBenassi's avatar
      StevenBenassi
      Staff

      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!