CubeLaunch Desktop Sizing – Blocks & Shortcodes

You want to…	Do this
Set a fixed/maximum desktop size (shortcode)	Add a class to the shortcode and cap the canvas directly:.my-promo-cube.cubelaunch-canvas{ max-width:450px; max-height:450px; }
Set a fixed/maximum desktop size (block)	Add a class in Block → Advanced → Additional CSS class(es) (e.g., promo-cube). Target the inner canvas:.wp-block-cubelaunch-shape.promo-cube .cubelaunch-canvas-wrapper > canvas{ max-width:450px; max-height:450px; }
Make several blocks the same desktop size	Reuse one class (e.g., product-cube) on each block and use the same canvas rule as above.
Keep desktop size but still scale on phones	Leave your desktop rule as‑is and use the mobile guide to tweak --cl-mobile-size via media queries.
Disable theme “full/wide” stretching	Don’t use the Wide/Full alignments for that block, or override your theme’s alignwide/alignfull width for that wrapper.

1) What “desktop sizing” controls in CubeLaunch

On desktop (above the mobile breakpoint) the plugin does not resize the canvas for you—your theme’s layout and your CSS decide how large the square canvas appears. Mobile sizing (the --cl-mobile-size-* variables and “rails/strips”) kicks in only under the mobile breakpoint. (See the Mobile guide for those details.)

Rule of thumb: Size the canvas element for desktop. Mobile behavior is controlled by CSS variables.

---

2) Shortcodes: target the canvas directly

When you add a class to a shortcode, it ends up on the shortcode wrapper and the canvas has the class cubelaunch-canvas. So you can cap size like this:

Shortcode (paste literally):

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

CSS:

/* Desktop cap for this shortcode only */
.my-promo-cube.cubelaunch-canvas{
  max-width: 450px;
  max-height: 450px;
}

Tip: Use pixels for hard caps; use clamp() if you want a responsive upper limit.

---

3) Blocks (Gutenberg): target the inner canvas

For blocks, your custom class goes on the <figure class="wp-block-cubelaunch-shape ...">.
The canvas sits inside an internal wrapper:
<figure class="wp-block-cubelaunch-shape your-class"><div class="cubelaunch-canvas-wrapper"><canvas …></canvas></div></figure>

So target the canvas like this:

/* Desktop cap for a specific block instance */
.wp-block-cubelaunch-shape.our-promo-cube .cubelaunch-canvas-wrapper > canvas{
  max-width: 450px;
  max-height: 450px;
}

If you used a different class name, swap our-promo-cube accordingly.

Avoid fighting “alignwide/alignfull”:
If your theme stretches full/wide blocks, either:

• Don’t set Wide/Full for that block, or
• Override the width on the wrapper:

/* Optional: keep wrapper from stretching when theme applies alignwide / alignfull */
.wp-block-cubelaunch-shape.our-promo-cube{
  max-width: 480px;      /* wrapper cap */
  margin-inline: auto;   /* keep it centered */
}

(You still need the canvas rule to keep the square itself capped.)

---

4) Same size for multiple blocks

Give each block the same class (e.g., product-cube) and write a single rule:

.wp-block-cubelaunch-shape.product-cube .cubelaunch-canvas-wrapper > canvas{
  max-width: 380px;
  max-height: 380px;
}

---

5) Desktop + Mobile together

Desktop caps do not change mobile behavior. To tune phones:

• Use the mobile guide’s variables (--cl-mobile-size-*, --cl-rail-width, --cl-rail-height).
• Set per‑instance values in a mobile media query, while keeping your desktop cap.

Example (block named promo-cube):

/* Desktop cap */
.wp-block-cubelaunch-shape.promo-cube .cubelaunch-canvas-wrapper > canvas{
  max-width: 420px;
  max-height: 420px;
}

/* Mobile tune (still uses variables under 600px) */
@media (max-width:600px){
  .wp-block-cubelaunch-shape.promo-cube{ --cl-mobile-size: 80vw; }
}

---

6) Troubleshooting

• “My block CSS doesn’t hit the canvas.”
  Make sure you’re using the block selector:
  .wp-block-cubelaunch-shape.YOURCLASS .cubelaunch-canvas-wrapper > canvas { … }
• “Shortcode rule didn’t apply.”
  Check that you wrote it as .yourclass.cubelaunch-canvas { … } (no space).
• “It’s still huge on phones.”
  Desktop rules don’t override the mobile system. Add the mobile media‑query variable as shown above.
• “Caption overlaps the rails.”
  Rails attach to the canvas host, not the caption. That’s expected.

---

7) Related reading

• Mobile sizing & rails/strips (how phone behaviour works, variables, per‑instance toggles).
  See the CubeLaunch Mobile guide.

Go To FAQ