Overlapping Groups Merging Issue


This is a simplification of a problem I’m having with a website I’m making.

I have three groups (Group Red, Group Green, Group Blue), each group is invisible on page load. When the cursor hovers over a particular text box (Text A, Text B, Text C), the associated group (Text A to Group Red, Text B to Group Green, Text C to Group Blue) becomes visible.

When I overlap the groups, they merge in irregular ways each time and do not become visible when their associated text box is hovered over.

Each group is of equal size, and the elements within each group are of equal size.

Any assistance is appreciated.

Do you have this problem when you narrow the viewport width?


The issue occurs no matter the width of the viewport.

I think the responsiveness settings are not adjusted correctly.

You could DM me the link of the app with this page with right to edit and I’ll fix it. You then could analyze it.

I’ve varied the responsiveness settings and cannot get a different result. Appreciate your interest nonetheless.

Try to place fixed-width invisible groups between the color groups.

No luck. Whichever groups (e.g. Group Red and Group Green) are placed on top of the base group (e.g. Group Blue), those two groups remain invisible.

This topic was automatically closed after 70 days. New replies are no longer allowed.