Responsive project looks different on Mac

Report · May 08, 2017

I'm creating a responsive project that i started in Captivate 9 and now am using 2017, so i'm using the breakpoints method. I have fussed a lot with the different breakpoints as well as the points between those (using the slider to see what it looks like) and now it looks fine to me when I publish it or preview it. But people using Macs so far seem to have their text cut off on the title page. here is a link to the content.The title should read "English Language Proficiency Standards for Adult Education" but Mac users on Chrome and Safari only see the first line which reads "English Language Proficiency". I have the width of the text box set to Auto and the Height to %:

http://airhsdlearning.airws.org/elpmodule1v2/index.html

So it's hard for me to develop for a view that I don't even see in my project! Has anybody else experienced this?

Thank you,

Yonca

Report · May 08, 2017

I can't tell you why mac would size it differently, but it seems to be a pretty easy fix.

I took a look (using chrome on my mac) and to me it looks as though your text box is just not big enough. I clipped this from your screen.

See how the y is cut off, that leads me to believe that your text box just need to be resized to show all of the text.

Also this slide looks a little weird too, again stretching textbox size or using a smaller font should fix.

Finally, I am sure this is a rough draft, but I also noticed you navigation buttons up top do not work correctly.

Hope that is helpful

Brian

Report · May 08, 2017

Thanks for your reply. When I play with the size of the text box it messes up the alignment of the little red guy jumping over the "En" of the word "English". That has been another tricky aspect of this - keeping that guy where he is supposed to stay. I'm using Smart Positioning, but he doesn't stay put across all views when i use the slider.

I had it working pretty well in the link that I sent out, except for on Macs..

Now i'm trying to learn how to do this using Fluid boxes but i'm not sure i can get that guy to stay exactly where i want.. I will need to play with Fluid boxes more. I'm still having trouble getting him to stay in the right place.

Here is my guy in the Fluid box version of the page:

Here is a link to the fluid box version: http://airhsdlearning.airws.org/fluidbox/index.html

He is positioned with Smart positioning too:

I'm not sure what the best way is to proceed.

Report · May 09, 2017

Preview is not totally WYSIWYG for responsive projects, you have to be aware of that. I am used to make the height of text containers (both captions and shapes) bigger than what is needed, because on many mobile devices the text will take up more space. Relative positioning between objects can help, but you don't tell how you did set up the size and the position of the 'mother' object? Good practice, since width is much more important than height, is to set the width of objects in %. If you want to keep the width/height ratio for objects (like that guy - is it a SVG?) you need to set the height to Auto. It is a lot of trial and error to create a layout that fits all browser resolutions. HTML5 is not really standardized, each browser can show the result in a slightly different way. Try out different browsers, not only Safari on Mac or iPad.

Be careful with Fluid boxes: fthey can be very useful, but have several limitations like no overlap for objects and you'll lose the control over the exact position. Several objects are excluded from fluid boxes as you can read in this blog post (don't forget to read my comment as well):

What type of objects are not supported in a Fluid Box? | eLearning