How it works
Every content block in Alva Courses starts full width and centred. Blocks that can sit narrower than the lesson column have a width control, and blocks that show media or a button have an Alignment control with Left, Center and Right.
Both settings belong to a single block, so one lesson can mix a full-width video, a left-aligned image and a centred download button.
Which blocks have width and alignment controls
Alva Courses adds these controls to blocks whose content can visibly move inside the lesson. Quiz, Reflection Box, EPUB, MS Office and HTML blocks have no width or alignment settings.
| Block | Width | Alignment |
|---|---|---|
| Video | Size presets: Small, Medium, Large, Full | Left, Center, Right |
| YouTube | Size presets: Small, Medium, Large, Full | Left, Center, Right |
| Image | Size presets plus an Image size slider (25–100%) | Left, Center, Right |
| Audio | Width slider (25–100%) | Left, Center, Right |
| None | Left, Center, Right (Download Button mode only) | |
| Button | None | Left, Center, Right |
| Zoom | None | Left, Center, Right |
| File | None | Left, Center, Right |
The Video block covers uploaded videos, Alva Video Hosting, and YouTube, Vimeo or Loom links. VdoCipher and Bunny Stream blocks, on stores where they are enabled, have Width buttons from 25% to 100% and the same Alignment control. To align text, use the Align menu in the Text block toolbar.
Resize and align a block
1. Open the block in the lesson editor
In the Shopify admin, open Alva Courses, select a course and open the lesson. Expand the block you want to change. Video, YouTube and Image blocks show their size and alignment controls once the media is added.
2. Choose a width
Under Size presets, click Small (25%), Medium (50%), Large (75%) or Full (100%). Image blocks also have an Image size slider, and Audio blocks have a Width slider, both from 25% to 100%.
3. Choose an alignment
Under Alignment, click Left, Center or Right. Video, audio and button previews inside the block move to match. The image preview stays centred, so check an image's placement with Preview.
4. Save and preview
Save the lesson, then click Preview to open it in your storefront and check the layout the way a student will see it.
Why alignment needs a width below 100%
Alignment moves a block only when it is narrower than the lesson column. A video or audio player set to Full (100%) already fills the column, so Left, Center and Right look the same.
Until you choose a smaller width, Video, YouTube and Audio blocks show the hint Alignment applies when the width is below 100%. under the control. Pick Small, Medium or Large first, then choose the side.
What students see
Students see each block at the width and position you chose in the storefront course player. On phones, images expand to the full lesson width so they stay readable.
Videos and audio players keep the percentage you set on every screen size, so a Small (25%) video stays small on a phone. Preview the lesson on a phone before you publish a narrow video.
Common questions
Why doesn't my video move when I click Left?
The video is set to Full (100%), so it already fills the lesson column. Choose Small, Medium or Large under Size presets first, then pick Left or Right under Alignment.
Can I align a PDF that is embedded in the lesson?
No. Alignment appears only when the PDF block is in Download Button mode, where it moves the download button. In Embedded Viewer mode the PDF reader always fills the lesson width.
Does Hide download button stop students saving a PDF?
No. It hides the browser's PDF toolbar, including its download, print and zoom controls, in browsers that support it. Students can still save the file in other ways, so don't rely on it to protect a document.
Will my existing lessons change?
No. Existing blocks keep the width and alignment they already have. A block only changes when you choose a new width or alignment for it and save the lesson.
See also
Was this helpful?
Last updated 2026-10-08