Fluid Boxes Problems

[nancyk2019]

Hi. I was trying to build a project using Captivate that needs to be responsive. I'm using the fluid boxes, or trying to at least. I've built with Captivate in the past, but the last time I worked on a responsive project was back when there were break points.

The problem I'm experiencing relates to phone-size issues where the shapes with texts are resized so small that the little box that you can click on to expand the text on a semi-transparent layer is larger than the shapes, which are buttons.

I'd upload my file, but it is proprietary and I can't post it on the forum itself. Can anyone help? Thank you.

[Paul Wilson CTDP]

Hello Nancy,

I think many people assume that learning designed for a desktop can always be designed for the mobile device. While you can resize fonts and rearrange the content to make better use of the space there are limits as to how much content will fit on a mobile screen. I'm a fan of designing for mobile but I look at it differently than most. Many designer-developers consider mobile design an afterthought. I design with the mobile screen first and then decide how to design the layout for the desktop.

Of course, this doesn't help you right now. In the meantime, consider giving more space to your navigation controls so this doesn't happen. Also, consider ways you can chunk the content across multiple slides rather than squeezing it into one. I think we sometimes forget that slides are completely free. You can always add another. Experiment with the Uniform font scaling and minimum font sizes for each slide and see what optional elements you can get rid of.

Best of luck.

[nancyk2019]

Thanks, Paul. Yours was one of the YouTube videos I looked at as I was trying to figure out what was going on. There isn't a lot of content on the desktop-sized slide, which is why I'm confused why things aren't scaling correctly. Do you mind if I message you a few screen shots?

[Lilybiri]

You can insert screenshots.... use the image button in the nrowser version of the forums.

[nancyk2019]

Okay, thanks Lilybiri. Below is what I'm working on.

1. This is non-responsive. Person clicks on one of the 'adfa' buttons and then a third box appears to the right, depending on what people click.

2. After someone clicks.

3. Same setup in a responsive design, or the closest I can come with the fluid boxes, not published yet). I can't get the boxes on the right to stack the way I did in non-responsive.

4. Same setup in responsive design (as viewed on desktop)

5. Same setup in responsive design (on mobile, horizontal)

6. Same setup in responsive design (on mobile, vertical)

7. Fluid boxes settings

Any suggestions or help on what I can do differently are appreciated.

[Vic - PSCL]

Hey nancyk2019,

Did you ever find a working solution for this?

Thanks for your time!

Cheers,

[Lilybiri]

Sorry, apparently I missed the last answer of the OP.

BTW it is still possible to use Breakpoint views, where you have more control. But you need to save the Fluid Boxes project and convert it using the Project menu.

My first recommendation is always to reduce the minimum font size. You find the default size, 14pt, in the Slide properties. That is way too high. Breakpoint views workflow has a minimum font size of 10pt, and in most circumstances even 8pt will do the trick. Contrary to Breakpoints where you set up discrete font sizes for each Breakpoint view, in Fluid Boxes the font size is reduced gradually (which is great) when the browser resolution is decreased, but that stops when the minimum font size is reached.

Second recommendation: reduce text even more, choose a font which is not as wide as the most used fonts. Some font families have a Narrow type which will allow you to have more text in one text container.