CubeLaunch Mobile Sizing & “Scroll Rails/Strips” – Complete Guide

0) TL;DR (Quick Reference)

You want to…	Do this
Change the default mobile size of all cubes	Put CSS vars in Appearance → Customize → Additional CSS, or add a small PHP filter (`cubelaunch_mobile_css`) to change the defaults the plugin injects.
Resize one specific cube	Give its wrapper a class (shortcode `class=""` or Block → Advanced → Additional CSS class(es)) and set `--cl-mobile-size` for that class in a mobile media query.
Turn off side rails (left/right) for one cube	Add class and set `--cl-rail-width: 0;` or add class `cl-rails-x-off`.
Turn off top/bottom rails for one cube	Add class and set `--cl-rail-height: 0;` or add class `cl-rails-y-off`.
Turn off all rails for one cube	Add class `cl-rails-off`.
Turn rails off everywhere	PHP filter: set `enable_rails_x => false` and/or `enable_rails_y => false`, or set the global CSS vars to `0`.
Change the phone breakpoint (600px)	Use the PHP filter (`cubelaunch_mobile_css`) to change `breakpoint` and your own CSS/JS overrides if needed.
Do nothing	Defaults just work. ✅

What is a “shape” and where do they come from?

CubeLaunch can render shapes in three ways:

Coming Soon overlay

Admin → CubeLaunch → Coming Soon Settings.
This is a full‑page overlay intended to feature one shape. Scroll rails are disabled here by design.

Block (Gutenberg) — Reusable shapes (CPT) for Pages & Posts

Admin → CubeLaunch → Shapes for Pages & Posts.
In the block editor, insert “CubeLaunch Shape”. The block includes Small / Medium / Large size presets and a background‑color override.

Shortcodes

On the same CPT list, each saved shape provides a shortcode you can paste into page builders, widgets, the classic editor, etc.

Example (basic):

[cubelaunch_shape id="123"]

Example (with your own class, for per‑instance CSS):

[cubelaunch_shape id="123" class="my-promo-cube"]

Why rails exist

On phones, the canvas needs drag/pinch so users can spin the shape—but that can “steal” vertical scroll.
Rails (invisible strips) solve this:

Side rails (left/right) — added with CSS pseudo‑elements on the canvas host.
Top/bottom rails — added as real elements by a tiny JS helper.

Touches on the rails scroll the page (and still allow pinch‑zoom). Touches in the center keep the full 3‑axis spin feeling.

Defaults & where styles come from

Base CSS lives in the plugin’s stylesheet and targets blocks/shortcodes under
body:not(.cubelaunch-coming-soon-active) (so Coming Soon stays untouched).
The plugin injects variables only (values) after that stylesheet so site owners/devs can change defaults without editing files.
A tiny helper script (cubelaunch-mobile-rails.js) inserts the top/bottom rail elements only on touch devices under the mobile breakpoint.

Shipping defaults:

:root{
  --cl-mobile-size-default: 85vw;  /* shortcodes & blocks without size class */
  --cl-mobile-size-small:   70vw;
  --cl-mobile-size-medium:  85vw;
  --cl-mobile-size-large:   90vw;

  --cl-rail-width:   15%;  /* each side */
  --cl-rail-height:  15%;  /* top and bottom */
}
/* Media query used by the mobile rules */
@media (max-width: 600px){ … }

Side rails attach to the canvas host (for blocks that’s the internal .cubelaunch-canvas-wrapper, for shortcodes the host is .cubelaunch-embedded-shape).
Top/bottom rails are two elements (.cl-rail-y--top, .cl-rail-y--bottom) appended by JS and sized with --cl-rail-height.

Non‑tech: change sizes with CSS

Open Appearance → Customize → Additional CSS.

Change ALL cubes on phones

:root{
  --cl-mobile-size-default: 75vw;
  --cl-mobile-size-medium:  75vw;
}

Resize one specific cube

Give it a class

Block:
Select the CubeLaunch block → Advanced → Additional CSS class(es) → my-promo-cube

Shortcode (example):

[cubelaunch_shape id="123" class="my-promo-cube"]

Then add:

@media (max-width:600px){
  .my-promo-cube{ --cl-mobile-size: 60vw; }
}

Adjust or disable rails per instance

Side rails only:

@media (max-width:600px){
  .my-promo-cube{ --cl-rail-width: 12%; } /* thinner sides */
  /* or disable sides entirely */
  .my-promo-cube{ --cl-rail-width: 0; }
}

Top/bottom rails only:

@media (max-width:600px){
  .my-promo-cube{ --cl-rail-height: 10%; } /* thinner top/bottom */
  /* or disable top/bottom entirely */
  .my-promo-cube{ --cl-rail-height: 0; }
}

Per‑instance classes & opt‑outs

Add one of these classes to the wrapper (Block → Advanced, or shortcode class=""):

cl-rails-off — disable all rails (sides + top/bottom)
cl-rails-x-off — disable side rails only
cl-rails-y-off — disable top/bottom rails only

Or set the variables per wrapper:

@media (max-width:600px){
  .hero-cube{ --cl-rail-width: 0; --cl-rail-height: 0; --cl-mobile-size: 90vw; }
}

Developers: PHP filters

1) `cubelaunch_mobile_css` — values‑only injector

Override the numbers the plugin injects (sizes, rails, breakpoint, enable flags).
(We don’t inject big selector rules in PHP—only variables, so themes can still override via CSS.)

Defaults passed to your filter:

[
  'sizes' => [
    'default' => '85vw',
    'small'   => '70vw',
    'medium'  => '85vw',
    'large'   => '90vw',
  ],
  'rail_width'     => '15%', // left/right strips
  'rail_height'    => '15%', // top/bottom strips
  'breakpoint'     => 600,   // px
  'enable_rails_x' => true,  // side rails (CSS)
  'enable_rails_y' => true,  // top/bottom rails (JS)
  // If an old 'enable_rails' key is returned, we mirror it to both axes.
]

Examples

// Slightly smaller everywhere + thinner sides
add_filter('cubelaunch_mobile_css', function($args){
  $args['sizes']['default'] = '78vw';
  $args['sizes']['medium']  = '78vw';
  $args['rail_width']       = '12%';
  return $args;
});

// No top/bottom rails globally (keep side rails)
add_filter('cubelaunch_mobile_css', function($args){
  $args['enable_rails_y'] = false;
  return $args;
});

// Tablet breakpoint + larger "large"
add_filter('cubelaunch_mobile_css', function($args){
  $args['breakpoint']     = 768;
  $args['sizes']['large'] = '95vw';
  return $args;
});

2) `cubelaunch_mobile_js` — helper script options

Control the top/bottom rail helper.

Defaults:

[
  'breakpoint'    => 600,
  'enableXRails'  => true,  // included for parity; sides are CSS‑driven
  'enableYRails'  => true,  // JS controls top/bottom rails
  'scope'         => 'body:not(.cubelaunch-coming-soon-active)',
  'wrapperSel'    => '.cubelaunch-embedded-shape, .wp-block-cubelaunch-shape',
  'canvasSel'     => 'canvas[id^="cubelaunch-instance-"]',
  'vars'          => ['railWidth' => '--cl-rail-width', 'railHeight' => '--cl-rail-height'],
]

Disable top/bottom rails everywhere:

add_filter('cubelaunch_mobile_js', function($opts){
  $opts['enableYRails'] = false;
  return $opts;
});

Troubleshooting

“Caption under the block isn’t clickable.”
Side rails attach to the internal canvas wrapper for blocks, not to the <figure>.
If your theme changes the block markup, confirm in DevTools that rails are on the canvas host (not the caption).
“Small/Medium/Large all look the same on phones.”
Remove any old mobile rules that set canvas width directly. The current system sets a variable per preset; a single rule applies it.
“Shortcodes resize but blocks don’t (or vice versa).”
Check wrapper selectors:
Blocks: .wp-block-cubelaunch-shape .cubelaunch-canvas-wrapper > canvas
Shortcodes: .cubelaunch-embedded-shape > canvas.
“Nothing changed.”
Clear caches (plugin + server), hard refresh. Ensure the inline style tag with --cl-mobile-size-* is after the base CSS.

FAQ

Do rails affect the Coming Soon overlay?
No—everything is gated by body:not(.cubelaunch-coming-soon-active).

Will changing these vars affect desktop?
No. Desktop sizing lives outside the mobile media query.

Can I stop the plugin from injecting variables?
Yes—return early in the filter or override in your theme’s CSS.

Why not use !important?
CSS variables keep things override‑friendly for site owners and themes.

Version note

Side rails + top/bottom rails and the values‑only variable injector shipped in CubeLaunch Core v1.0 (July 2025).
Remove any older “mobile fixes” you pasted previously.

Quick snippets

Per‑instance cap at 450px (desktop too):

Desktop caps don’t change mobile — see variables above for phone sizing.

/*Shortcode:*/
.my-promo-cube.cubelaunch-canvas{ 
max-width:450px; 
max-height:450px; 
}

/*Block:*/
.wp-block-cubelaunch-shape.my-promo-cube .cubelaunch-canvas-wrapper > canvas{
  max-width:450px; 
  max-height:450px;
}

Per‑instance mobile tuning:

@media (max-width:600px){
  .my-promo-cube{
    --cl-mobile-size: 78vw;
    --cl-rail-width:  12%;
    --cl-rail-height: 10%;
  }
}

CubeLaunch Mobile Sizing & “Scroll Rails/Strips” – Complete Guide

0) TL;DR (Quick Reference)

What is a “shape” and where do they come from?

Coming Soon overlay

Block (Gutenberg) — Reusable shapes (CPT) for Pages & Posts

Shortcodes

Why rails exist

Defaults & where styles come from

Non‑tech: change sizes with CSS

Change ALL cubes on phones

Resize one specific cube

Give it a class

Adjust or disable rails per instance

Per‑instance classes & opt‑outs

Developers: PHP filters

1) `cubelaunch_mobile_css` — values‑only injector

2) `cubelaunch_mobile_js` — helper script options

Troubleshooting

FAQ

Version note

Quick snippets

CubeLaunch Desktop Sizing — Blocks & Shortcodes

GO to FAQ PAGE

CubeLaunch Mobile Sizing & “Scroll Rails/Strips” – Complete Guide

0) TL;DR (Quick Reference)

What is a “shape” and where do they come from?

Coming Soon overlay

Block (Gutenberg) — Reusable shapes (CPT) for Pages & Posts

Shortcodes

Why rails exist

Defaults & where styles come from

Non‑tech: change sizes with CSS

Change ALL cubes on phones

Resize one specific cube

Give it a class

Adjust or disable rails per instance

Per‑instance classes & opt‑outs

Developers: PHP filters

1) cubelaunch_mobile_css — values‑only injector

2) cubelaunch_mobile_js — helper script options

Troubleshooting

FAQ

Version note

Quick snippets

CubeLaunch Desktop Sizing — Blocks & Shortcodes

GO to FAQ PAGE

1) `cubelaunch_mobile_css` — values‑only injector

2) `cubelaunch_mobile_js` — helper script options