Skip to main content

🎓 Lesson 17: Fluid Boxes & Responsive — the Classic Way

In the all-new Captivate, responsive design mostly just happens. In Captivate Classic Classic, you steer it by hand using fluid boxes — containers that hold your objects and rearrange them as the screen changes. This tour won't turn you into a fluid-box expert; it'll give you a clear picture of how the approach works and when its extra control is worth the extra effort.

📚 What You'll Learn

By the end of this lesson, you will be able to:

  • Explain what a fluid box is and how objects "snap into" it
  • Describe how fluid boxes reflow content across screen sizes
  • Recognize what breakpoints are in Classic and how you tweak each one
  • Contrast Classic's hands-on responsiveness with the all-new tool's automatic approach All-New
  • Judge when the extra control of fluid boxes is genuinely useful

⏱️ Estimated Time: 30 minutes

🎯 Project: Map a simple slide layout onto fluid boxes — on screen if Classic is installed, or on paper — and predict how it reflows on a phone.

In This Lesson

The Responsive Problem, Two Solutions

Every modern course faces the same challenge: a learner might open it on a wide desktop monitor, a tablet held sideways, or a phone in one hand. A layout that looks perfect on one can be a cramped mess on another. Responsive design is the craft of one course adapting gracefully to all of them — you met it back in Lesson 7.

The all-new tool and Classic solve this problem with genuinely different philosophies:

  • All-new Adobe Captivate All-New is responsive by default. You build with components in a flowing layout, and the tool reflows them to fit the screen automatically. You nudge things only where needed.
  • Captivate Classic Classic is responsive on request, through fluid boxes. You divide the slide into containers, drop objects into them, and Classic reflows the boxes across screen sizes — with you steering the rules.

🧭 One analogy to carry through the lesson

Think of packing a car trunk. The all-new tool is a self-organizing trunk that reshuffles your bags to fit whatever space is available. Classic's fluid boxes are like labeled bins you place in the trunk: you decide which bag goes in which bin and how the bins stack, and the bins keep everything tidy as the trunk changes size. More setup, more say over the result.

Neither is "the right way." They're two answers to the same question, and knowing both means you can work on any responsive Captivate project you meet.

What a Fluid Box Actually Is

A fluid box is a container on the slide — an invisible region that holds one or more objects and controls how they sit and flex. Instead of pinning a title to an exact pixel spot (which would break on a small screen), you drop the title into a fluid box near the top, and the box takes responsibility for keeping it sensibly placed everywhere.

Fluid boxes nest: a big box can be split into a row of two, one of which splits into a stack of three, and so on — like a grid you design. Each object snaps into a box rather than floating freely on the stage. Here's the idea in mock form:

Figure 1 — Captivate Classic (a simplified mock-up, not a real screenshot): a slide carved into a header box, a two-column row, and a footer box, with objects snapped into each. The Properties panel governs how a selected box flows and aligns.

When you select a fluid box, its Properties give you the controls that make it "fluid": the flow direction (do children sit in a row or a stack?), whether they wrap onto a new line when space runs short, and how they align and distribute inside the box. Set those once, and the box knows how to rearrange itself when the screen shrinks.

💡 The mental flip. On a fixed slide you ask "where do I put this object?" With fluid boxes you ask "which box does this object belong in, and how should that box behave?" Answer the second question well and responsiveness largely takes care of itself.

Breakpoints & Reflow in Classic

A breakpoint is a screen-width checkpoint — commonly a desktop, a tablet, and a phone view. Classic lets you switch between these views while authoring and fine-tune the layout at each one. The fluid boxes carry your objects between views automatically; you step in only where a particular size needs a nudge (say, hiding a decorative image on the phone, or bumping up a font).

graph TD A["🖥️ Desktop view
image beside text (a row)"] --> B["📱 Tablet view
fluid boxes reflow,
text may wrap"] B --> C["📱 Phone view
row stacks vertically:
image above text"] A --> D["Author tweaks per breakpoint
(font size, hide extras, spacing)"] B --> D C --> D style A fill:#bfdbfe,color:#1e293b style B fill:#c7d2fe,color:#1e293b style C fill:#bbf7d0,color:#1e293b style D fill:#fde68a,color:#1e293b

Figure 2 — In Classic you design once with fluid boxes, then visit each breakpoint to fine-tune. A two-column row on desktop can stack into a single column on the phone.

The classic (pun intended) example: an image sitting beside a paragraph on a wide desktop. On a phone, there's no room for two columns, so the fluid box stacks them — image on top, text below. You didn't rebuild the slide; you set the box's flow-and-wrap behavior, and it did the rearranging. That's reflow doing its job.

⚠️ Honest about the effort

Fluid boxes reward planning. If you drop objects onto a bare stage first and try to "make it responsive" afterward, you'll fight the tool. The smoother path is to carve the slide into boxes first, then place objects into them. It's more upfront thinking than the all-new tool asks for — that's the trade you're making for finer control.

You don't need to memorize every fluid-box setting today. The survey-level goal is simply this: know that Classic can be fully responsive, that fluid boxes are the mechanism, and that breakpoints are where you polish each screen size.

Hands-On vs. Automatic: When to Choose Each

Now the practical question — which approach for which job? Here's an honest side-by-side.

Consideration All-new Captivate All-New Classic fluid boxes Classic
Responsiveness Automatic by default On request, via containers you design
Setup effort Low — build and go Higher — plan boxes first
Fine control per screen Good, mostly automatic Very granular, breakpoint by breakpoint
Best for New responsive courses, speed Inherited .cptx projects; teams already fluent in fluid boxes

✅ Reach for Classic fluid boxes when…

  • You're editing an existing responsive .cptx that already uses them
  • Your team's standard is Classic and everyone knows fluid boxes
  • You want very deliberate control over how a complex layout collapses on small screens

For anything brand-new where responsiveness matters, the all-new tool's automatic approach is usually faster and just as capable. This mirrors the rule you've seen all along: all-new by default, Classic for a specific reason.

💡 The trend still applies. Adobe keeps investing in the all-new tool's responsive engine. What feels like a Classic advantage in fine control today may narrow over time — so when you're choosing, glance at what the current version of the all-new tool can do before assuming you need Classic.

🎯 Try It: Map a Layout to Fluid Boxes

🏋️ Activity: Plan the boxes, predict the reflow (about 15 minutes)

Objective: Practice the fluid-box mindset — think in containers, then predict how they rearrange. Works on screen or entirely on paper.

Steps

  1. Pick a simple slide: a title, an image, a paragraph, and a Next button. Sketch how it looks on a desktop. (⏱️ 3 min)
  2. Draw the fluid boxes: a header box for the title, a two-column row (image left, text right), and a footer box for the button. Label each box. (⏱️ 4 min)
  3. Now draw the phone view: predict how the row collapses — most likely the image stacks above the text, header and footer staying put. (⏱️ 4 min)
  4. In Classic (if installed): insert fluid boxes on a blank responsive slide, drop objects in, then switch to the phone breakpoint and compare it to your prediction. (⏱️ 4 min)
  5. No Classic? The paper prediction is the exercise — you're training the container-first way of thinking, which is the whole point.
💡 Hint

If your prediction and the real reflow disagree, that's the most useful moment of the exercise — the mismatch is telling you something about a box's flow or wrap setting. Adjust the box, don't move the object by hand; letting the container do the work is the skill you're building.

✅ Activity Complete When…

  • You've divided a slide into named fluid boxes instead of free-floating objects
  • You can predict how a two-column row collapses on a phone
  • You can state one situation where you'd choose fluid boxes over the all-new tool's automatic reflow

🎯 Quick Quiz

Question 1: What is a fluid box in Captivate Classic?

Question 2: How does Classic's responsive approach differ from the all-new tool's?

📓 Learning Journal

Keep your Learning Journal going — a note in your favorite app, a doc, or a paper notebook. It's where you turn "I read that" into "I can do that." After each lesson, jot down:

  • Key concepts you learned
  • Things that clicked for you
  • Questions or confusion points to revisit
  • Ideas you want to try
  • Your progress and how you feel about learning this

✍️ This lesson's prompt: In your own words, describe the "container-first" mindset of fluid boxes and how it differs from placing objects freely. Would you rather have automatic reflow or hands-on control for your own course, and why? There's no wrong answer — the reasoning is what matters.

📝 Lesson Summary

🎓 Key Takeaways

  • Fluid boxes are Classic's responsive containers: objects snap into them, and the boxes reflow content across screens.
  • Boxes nest and carry flow, wrap, and alignment rules — set them once and the layout rearranges itself.
  • Breakpoints (desktop / tablet / phone) are where you fine-tune each screen size; a two-column row can stack into one column on a phone.
  • Classic is responsive on request and hands-on; the all-new tool is responsive by default and automatic. All-new for new work, Classic for inherited projects or team standards.

🎉 What You've Accomplished

You now understand how the older tool does something you might have assumed only the modern one could — real responsive design. More importantly, you can think in containers, predict a reflow, and explain the trade-off between automatic and hands-on. That's exactly the survey-level fluency Part 4 is going for.

❓ Common Questions at This Stage

Do I have to use fluid boxes in every Classic project?

No. Classic can also build fixed, non-responsive projects (great for a tightly designed, single-size lesson). Fluid boxes are the tool you reach for specifically when a Classic project needs to adapt across devices.

If the all-new tool is automatic, why would anyone hand-build boxes?

Two honest reasons: you've inherited a project that already uses them, or you want very deliberate control over exactly how a complex layout collapses. For fresh work where responsiveness just needs to be good, the automatic approach usually wins on speed.

Is this hard to learn?

The concept is quick; the fiddliness comes from planning boxes before placing objects. Do one small slide end to end — carve boxes, drop objects, check the phone view — and the workflow clicks. You don't need mastery for this course, just the map.

🔭 Looking Ahead

In Lesson 18, we reach Classic's real power tools: variables and advanced/conditional actions — the logic engine behind personalized, branching, and gamified courses, explained as logic, not code.

✅ Before the Next Lesson

  • Do the paper (or on-screen) fluid-box mapping if you haven't yet
  • Write this lesson's journal prompt — the container-first mindset and your preference
  • Remember the trade: automatic-and-fast vs. hands-on-and-precise

📚 Additional Resources

🌟 Encouragement for the Journey

Responsive design used to intimidate whole teams. You just learned two different ways to do it and can say when to use each — that's real, transferable authoring judgment. Boxes, breakpoints, reflow: none of it is a mystery to you now.