Common stumbling points when building in Studio.Design

Here are some common issues you might run into while building your site in Studio.Design, along with how to fix them. For each issue, check the items below and try the solutions that seem most relevant.

A specific element, CMS item, or article isn't showing up

[Studio.Design CMS] Is the item's publish status set to "Published"?

Solution

Change the CMS item's publish status to "Published."

Screenshot: Changing an item's publish status to 'Published' from the CMS dashboard.

CMS items aren't showing on the published site

[Studio.Design CMS] Is the collection's publish status set to "Published"?

Solution

Change the CMS collection's publish status to "Published."

Screenshot: Changing a collection's publish status to 'Published' from the CMS dashboard.

CMS items aren't showing on the published site

[Studio.Design CMS] Are you using dynamic pages?

Solution

To display Studio.Design CMS article items, you need to create a page that displays article details using a dynamic page.

Screenshot: Checking that an article details page (dynamic page) exists in the design editor's page list.

[Studio.Design CMS] Is the linked CMS model correct?

Solution

Check that the CMS model linked to your dynamic list is the correct one.

Dynamic list
CMS list

Is the starting position of your appearance animation set correctly?

Solution

If the starting position of an appearance animation falls outside the screen or its parent box, the animation won't play.

When the preview or live site's screen width becomes narrower than the animation's starting position, elements won't appear correctly.

Why your "On appear" animation isn't showing, and how to fix it

Is the box element set to hidden?

Solution

If an element doesn't show up only at a specific device width, the box's display setting for that device width (breakpoint) may be unchecked.

Show/hide settings for boxes per breakpoint

Is the stacking order correct? (Is another box overlapping?)

Solution

Check whether another box is overlapping the box in question.

Screenshot: Another box's padding overlapping a specific box.

Are display conditions set?

Solution

If a box element inside a dynamic list or dynamic page isn't showing up, check whether incorrect "display conditions" have been set.

Display condition settings for dynamic lists and dynamic pages

Links don't go to the right page (it goes to a different page or shows a 404)

Is the link you set correct?

Solution

Check the link you've set to make sure it's correct.

How to set up different types of links

Is the link set on the right box?

Solution

Use the Layers panel to check that the link is set on the correct box.

Screenshot: In the design editor, selecting only the icon in a box with an icon and text side by side, and checking the 'Link' setting in the right panel.

How to set up different types of links

Is the stacking order correct? (Is another box overlapping?)

Solution

In the editor, check whether another box is overlapping the box where links or hover animations aren't working.

If needed, rearrange the layout or adjust the stacking order.

Issues caused by partially overlapping boxes

Issues caused by an animation box covering the whole area

Why links or hover animations aren't working, and how to fix it

[Studio.Design CMS] Are you using dynamic pages?

Solution

To display Studio.Design CMS article items, you need to create a page that displays article details using a dynamic page.

Screenshot: An article details page (dynamic page) exists in the design editor's page list.

Is the stacking order correct? (Is another box overlapping?)

Solution

In the editor, check whether another box is overlapping the box where links or hover animations aren't working.

If needed, rearrange the layout or adjust the stacking order.

Issues caused by partially overlapping boxes

Issues caused by an animation box covering the whole area

Why links or hover animations aren't working, and how to fix it

Text or content overlaps (gets cut off, overflows, or doesn't show)

Is the height set to auto?

Solution

For a box that contains other boxes, its height should generally be set to auto.

Setting it to auto allows the outer box's height to adjust automatically based on the height of the boxes inside.

When elements get cut off, overflow, or leave gaps in responsive view

The layout breaks on different devices

Have you set up responsive design?

Solution

Adjust the size and layout of your elements for each screen size, so that the display automatically adapts and optimizes based on the device your visitors are using (such as desktop, tablet, or smartphone).

Switching breakpoints from the base size down to mobile size to set up responsive design.

Setting up responsive design

Is the height set to auto?

Solution

We recommend setting the parent box's height to auto so it adapts more easily to different layouts.

When elements get cut off, overflow, or leave gaps in responsive view

Have you tried other units like %, flex, or auto?

Solution

Using units other than px (such as %, auto, or flex) can give you more flexible layouts.

Box layout: setting size (width and height)

Have you tried changing the direction?

Solution

You can change the direction from the arrow menu that appears above the box, or from the direction setting on the Box tab in the right panel.

Select the arrow pointing in the direction you want, and the boxes will arrange in that direction.

Is the browser zoom level the same?

Solution

Click the settings icon at the top right of your browser.
Select "Zoom" to check your browser's zoom level.

Viewing the site in a browser and confirming that the zoom is set to 100%.

Are you viewing at the same width?

Solution

Check the width of the device you're viewing on.
Drag the bar on the side of the screen to match that device width, and check how it looks.

Setting up responsive design > Checking responsive views

Still need help?

If this article didn't answer your question, feel free to reach out through chat support, or join the Studio.Design Community, where users share tips and ideas about using Studio.Design.

CMS properties

CMS Data Import from WordPress to Studio.Design

Studio.Design Glossary

CMS List

Carousel

20 Checkpoints to Solve Common Issues While Building

Common stumbling points when building in Studio.Design

A specific element, CMS item, or article isn't showing up

[Studio.Design CMS] Is the item's publish status set to "Published"?

[Studio.Design CMS] Is the collection's publish status set to "Published"?

[Studio.Design CMS] Are you using dynamic pages?

[Studio.Design CMS] Is the linked CMS model correct?

Is the starting position of your appearance animation set correctly?

Is the box element set to hidden?

Is the stacking order correct? (Is another box overlapping?)

Are display conditions set?

Links don't go to the right page (it goes to a different page or shows a 404)

Is the link you set correct?

Is the link set on the right box?

Is the stacking order correct? (Is another box overlapping?)

Issues caused by partially overlapping boxes

Issues caused by an animation box covering the whole area

[Studio.Design CMS] Are you using dynamic pages?

I set up a link but it isn't clickable

Is the stacking order correct? (Is another box overlapping?)

Issues caused by partially overlapping boxes

Issues caused by an animation box covering the whole area

Text or content overlaps (gets cut off, overflows, or doesn't show)

Is the height set to auto?

The layout breaks on different devices

Have you set up responsive design?

Is the height set to auto?

Have you tried other units like %, flex, or auto?

Have you tried changing the direction?

The editor, live preview, and published site look different

Is the browser zoom level the same?

Are you viewing at the same width?

Still need help?