Responsive Project in Captivate Classic

[carly_inseer]

I have given up on the new Adobe Captivate and am re-building my project in Captivate Classic. I created a responsive project in CC19, built my fluid boxes, etc. However, when I change to the phone view, it looks like garbage. See below.

Desktop:

Mobile:

I can't figure out what to change to fix this hot mess. I have a few questions:

- Is there an easy (or heck, even not-so-easy) way to get the mobile format looking better? I can't seem to wrap my brain around what is happening here. 

- Can you create different text sizes for the various breakpoints, and if so, how?

[Lilybiri]

Something is awry with your setup of the Fluid Boxes, should need to see more details. I think you kept the option 'Wrap....' everywhere, and need to change that to have a look in mobile that is more acceptable.

[carly_inseer]

I realized one step that I missed. I read somewhere that you need to create your first fluid box as 1 horizontal box - I had skipped this step. I added that in and mobile looked a little better:

Mobile: 

Then I changed the FB19 to "squeeze in a column" vs. wrap to fit.

I have two remaining issues:

1) Font sizing on mobile. The font is too big for the course title. Can you have different font sizes at the different breakpoints? For example, the font size at 48 for desktop for my course title and maybe 28 on mobile? 

2) The button is squished. Any ideas on how to get it to retain the shape it is at desktop size?

[Lilybiri]

For the button: check if 'Maintain aspect ratio is checked. For the surrounding fluid box, preview some padding and be sure to take out . Personally I would also change the level higher fluid box: set wrap options to squeeze in a row. That one should also be horizontal. That will allow the button to remain bottom right. 

For font size: it is not possible to set specific font sizes for different browser reslutions (that is only possible in Breakpoint Views workflow). Reason is that the font size will smoothly decrease when there is not enough space. However I wonder if you used Preview to see the real result? Just changing the device will not show a WYSIWYG result. I can only recommend to make the shape or the caption just big enough to have the title in the desktop font size.

[carly_inseer]

Thanks for the info on font sizes... I will preview on mobile and see what's actually happening with that one. 

I set the higher level FB to squeeze in a row and that worked well. However, I changed "maintain aspect ratio" and removed the padding of the surrounding FB (removed it for now), and the button style isn't really what I want. How do I reduce the vertical padding of the button and increase the horizontal padding? I want the button to be pill-shaped to match the client's branding. 

[carly_inseer]

Forgot to include a screenshot of what the button looks like now...

[Lilybiri]

There is no padding in the fluid box vertically, and/or you have still 'Stretch to Fill' activated vertically. Maintain ratio needs to be activated. I double-checked the workflow, button for me always keeps same 'shape', just shrinks on smaller devices. Did you ever take a course about setting up Fluid Boxes?

[carly_inseer]

I've only watched a few YouTube videos. Do you have a resource you recommend?