Issue with Parent Group, Child Group, and Color Opacity in Lesson 1.4

Need help
1

Description of the Issue:

I am currently following the Bubble Academy Lesson 1.4, and I’ve encountered several issues while replicating the steps in the tutorial. Despite following the video instructions identically without changing any settings, my results are different. Below are the issues I am facing:

1. Parent Group Stretches Across the Page:

  • What I Did:
    • After setting up the page as instructed (Title: “Workplace,” Container Layout: “Column,” Default Page Width: 1400px), I selected the Group element from the toolbar and dropped it onto the page.
  • Expected Result:
    • The group should appear as a square box, as shown in the tutorial.
  • Actual Result:
    • The group stretches across the top of the page instead of forming a square box.

2. Color Opacity Percentage Is Grayed Out:

  • What I Did:
    • I selected the parent group and tried to change the background color opacity in the color picker popup.
    • I set the Style to “None (Custom)” to make adjustments.
  • Expected Result:
    • I should be able to adjust the opacity percentage in the color picker.
  • Actual Result:
    • The opacity percentage appears grayed out, and I cannot change it.

3. Child Group Does Not Behave Correctly:

  • What I Did:
    • I tried to create a child group inside the parent group by dragging and dropping the group element onto the parent group.
  • Expected Result:
    • The child group should appear as a square box inside the parent group, as shown in the tutorial.
  • Actual Result:
    • The child group stretches across the top of the parent group instead of appearing as a square.

Steps I’ve Tried to Resolve These Issues:

  1. Refreshed the editor and cleared my browser cache.
  2. Checked the container layout settings for both the parent and child groups.
  3. Set the parent group’s style to “None (Custom).”
  4. Temporarily changed the Container Layout to “Fixed” and tested dropping the group.
  5. Manually resized the groups after they were created, but this is not how the tutorial works.

Despite these attempts, the issues persist.

Environment Details:

  • Browser: (e.g., Google Chrome, Firefox)
  • running using Lenovo chrome book

Request:

Could you please assist me in understanding why:

  1. The parent group is stretching instead of forming a square box when I drop it onto the page.
  2. The color opacity percentage is grayed out and cannot be adjusted.
  3. The child group is not forming a square box inside the parent group.

It would be great if you could provide guidance or suggest settings that I may have missed.