Text in Fluid Box Becoming Partially Hidden

[RyanS_Extron]

I'm having a problem with the text in a fluid box. When shrinking the browser height, after the text shrinks to a certain size, it then becomes larger and partially hidden, with the dumb gray box popping up. I set the minimum font size to 8, but I feel that the problem occurs before it reaches that point. Is there some way around this issue?

[Lilybiri]

Did you test after publishing and uploading to a webserver?

[RyanS_Extron]

Yes, I did upload to a web server. The same issue occurs.

[Lilybiri]

How is the setup of the Fluid boxes? Is this CP2017 or CP2019?

[RyanS_Extron]

This is CP2019

[Lilybiri]

This is the parent fluid box, what about the fluid box with the title?  Why stretch?

Do you have all the D&D objects, including feedbacks in one fluid box? How is that one set up?

Are you using 11.0.1.266?

[RyanS_Extron]

All the D&D objects are in the second child fluid box, set to static. Here is the property info. for the header fluid box.

[RyanS_Extron]

I use "Stretch to Fit" so that the objects fit the layout space. If I don't, it looks like this:

[Lilybiri]

Problem is with the static fluid box. You aks for stretch in the parent fluid box, static fluid box means os not really fluid, height/width ratio has to be maintianed. That is causing issues for the top fluid box which is not static.

Why did you choose for fluid boxes project. A static fluid box should be used very sparingly. A good example is the feedback fluid box on  quizzing master slides. Because all feedback messages are stacked in the same box, since only one of them appears at each moment, and to save on real estate.

In your case, a static fluid box for the main part of the slide is a real bad idea. Sorry for that critical note.

[RyanS_Extron]

I don't mind the criticism. The reason I chose a fluid box project, was that when I created a non-responsive project, if I don't select to have it scale, then the project won't fit in the smaller devices. If I do select to have the project scalable, then the user can't zoom in using pinch. When I chose responsive-breakpoints, the drag sources and targets did not line up in the different devices, but moved around.

The reason for a static fluid box was so that the drag sources, targets, and background will scale at the same rate proportionately, so that I don't wind up with the different objects being too large or small. At the same time, the project resizes in each device, and the user can zoom using pinch.

[RyanS_Extron]

Also, with a static box, I can place objects over other objects.

[Lilybiri]

That last reason (staking) or adding objects in custom states is the only reason why I use a static fluid box. It is sort of a makeshift to allow to embed those situations but should be used sparingly for a true responsive project.

D&D slides I will be setting in in several fluid boxes to allow the real fluiditiy, where I allow objects to be arranged on screens in portatrait mode. But if you insist to have exactly the same layout? With Fluid boxes you are allowing Captivate to have some control over the layout when browser size is lower.

Main limitation of rescalable is that you will always have landscape mode.

If you want full control over the position of each object, Breakpoint views is the way to go. I don't understand your comment abot moving around? It is all about setting up the Position properties of each object.

[RyanS_Extron]

I set the breakpoints for:

desktop

1024

720

600

360

Here's what happens when I squeeze the width of the browser...

[Lilybiri]

Hmm.... are you sure to use Breakpoint Views workflow, doesn't look like it.

To switch to Breakpoint views workflow you need to convert the project with Project, Switch to Breakpoint mode. You have to set up the Position Properties. Change the font size in all breakpoints using the Object Style Manager.

[RyanS_Extron]

I already switched the project to Breakpoint mode:

[RyanS_Extron]

Here it is in review:

[Lilybiri]

What do you want exactly to happen when switching to a lower browser resolution? i see exactly the same objects in all resolutions.

Scrubbing is not a good way to see exactly what will happen when a user watches the course from a mobile device, because at that moment the browser resolution is fixed. You have to decide how you want it to look, and be managed on the different breakpoint views.

[RyanS_Extron]

As shown in the videos, I have adjusted the objects to look right for each breakpoint. This works when viewing in Captivate or in Review, but when I check in the browser, changing the browser width, I see errors in how the objects are laid out. This also happens when I import the project into another authorware where I am able to check each device dimension:

[Lilybiri]

I must miss something. Already asked about how you set up the Position Properties? You can set objects aligned and linked to other objects etc...  In the video I just see that the layout is always the same, only the center object in the bottom row is moving once slightly. To what is it aligned, in %?

[RyanS_Extron]

Here is how I set up the positioning for one object. The others follow the same way:

[Lilybiri]

No positioning is towards another object, all are set up with a % distance to the edges of the slides.

You want the objects to change the width/height ratio which is not a very common practice. It is the width which is normally set to a % and the Height left at Auto tokeep the ratio.

[RyanS_Extron]

What if the object is on the end? I need to have it set up with the % distance to the slide edge. The object next to it is positioned to the end object.