Does anyone know about HTML/CSS coding?

[12lybg]

I am trying to make the element which is a repeating group of two rows of cards responsive.

But on mobile screen versions and on Surface Duo screen is difficult to select cards.

If anyone knows about HTML coding I will be glad if they could let me know what is wrong about the code I’m using. This is the code:

/\* Disables scrollbars globally across desktop, iPad, and mobile viewports \*/ html, body { margin: 0 !important; padding: 0 !important; min-height: 100% !important; overflow: hidden !important; } #main-page-root { display: flex; flex-direction: column; width: 100vw; box-sizing: border-box; justify-content: center; background-color: #0b0c10; /\* Makes the dark background canvas slightly longer to eliminate gaps \*/ min-height: 110vh; padding-bottom: 120px; overflow: hidden; } .repeating-group, .repeating-group-item, div { overflow: visible !important; } /\* Premium layered ambient shadow \*/ \[id="Group Spiritual Idol Eng"\] { position: relative !important; filter: drop-shadow(0 14px 10px rgba(0,0,0,0.6)) drop-shadow(0 4px 4px rgba(0,0,0,0.35)) brightness(1.04) contrast(1.02) !important; transition: transform 0.25s cubic-bezier(0.25, 1, 0.5, 1), z-index 0.1s, opacity 0.2s ease-out, filter 0.25s ease-out !important; transform-origin: center center !important; } /\* Desktop Arc Positions \*/ div:nth-child(8n+1) > \[id="Group Spiritual Idol Eng"\] { transform: rotate(-30deg) translateY(64px) translateX(22px); } div:nth-child(8n+2) > \[id="Group Spiritual Idol Eng"\] { transform: rotate(-21deg) translateY(26px) translateX(12px); } div:nth-child(8n+3) > \[id="Group Spiritual Idol Eng"\] { transform: rotate(-12deg) translateY(4px) translateX(4px); } div:nth-child(8n+4) > \[id="Group Spiritual Idol Eng"\] { transform: rotate(-4deg) translateY(-8px) translateX(0px); } div:nth-child(8n+5) > \[id="Group Spiritual Idol Eng"\] { transform: rotate(4deg) translateY(-8px) translateX(0px); } div:nth-child(8n+6) > \[id="Group Spiritual Idol Eng"\] { transform: rotate(12deg) translateY(4px) translateX(-4px); } div:nth-child(8n+7) > \[id="Group Spiritual Idol Eng"\] { transform: rotate(21deg) translateY(26px) translateX(-12px); } div:nth-child(8n+8) > \[id="Group Spiritual Idol Eng"\] { transform: rotate(30deg) translateY(64px) translateX(-22px); } div:nth-child(n+9) { margin-top: 50px !important; } /\* Enhanced Hover Shadow Glow \*/ \[id="Group Spiritual Idol Eng"\]:hover, \[id="Group Spiritual Idol Eng"\]\[style\*="0.51"\] { filter: drop-shadow(0 28px 20px rgba(0,0,0,0.75)) drop-shadow(0 8px 8px rgba(0,0,0,0.4)) brightness(1.12) contrast(1.05) !important; } /\* Desktop Standout Stance on Hover / Selection \*/ div:nth-child(8n+1) > \[id="Group Spiritual Idol Eng"\]:not(\[style\*="opacity"\]):hover, div:nth-child(8n+1) > \[id="Group Spiritual Idol Eng"\]\[style\*="0.51"\] { transform: scale(1.12) rotate(-30deg) translateY(24px) translateX(22px) !important; z-index: 9999 !important; } div:nth-child(8n+2) > \[id="Group Spiritual Idol Eng"\]:not(\[style\*="opacity"\]):hover, div:nth-child(8n+2) > \[id="Group Spiritual Idol Eng"\]\[style\*="0.51"\] { transform: scale(1.12) rotate(-21deg) translateY(-14px) translateX(12px) !important; z-index: 9999 !important; } div:nth-child(8n+3) > \[id="Group Spiritual Idol Eng"\]:not(\[style\*="opacity"\]):hover, div:nth-child(8n+3) > \[id="Group Spiritual Idol Eng"\]\[style\*="0.51"\] { transform: scale(1.12) rotate(-12deg) translateY(-36px) translateX(4px) !important; z-index: 9999 !important; } div:nth-child(8n+4) > \[id="Group Spiritual Idol Eng"\]:not(\[style\*="opacity"\]):hover, div:nth-child(8n+4) > \[id="Group Spiritual Idol Eng"\]\[style\*="0.51"\] { transform: scale(1.12) rotate(-4deg) translateY(-48px) translateX(0px) !important; z-index: 9999 !important; } div:nth-child(8n+5) > \[id="Group Spiritual Idol Eng"\]:not(\[style\*="opacity"\]):hover, div:nth-child(8n+5) > \[id="Group Spiritual Idol Eng"\]\[style\*="0.51"\] { transform: scale(1.12) rotate(4deg) translateY(-48px) translateX(0px) !important; z-index: 9999 !important; } div:nth-child(8n+6) > \[id="Group Spiritual Idol Eng"\]:not(\[style\*="opacity"\]):hover, div:nth-child(8n+6) > \[id="Group Spiritual Idol Eng"\]\[style\*="0.51"\] { transform: scale(1.12) rotate(12deg) translateY(-36px) translateX(-4px) !important; z-index: 9999 !important; } div:nth-child(8n+7) > \[id="Group Spiritual Idol Eng"\]:not(\[style\*="opacity"\]):hover, div:nth-child(8n+7) > \[id="Group Spiritual Idol Eng"\]\[style\*="0.51"\] { transform: scale(1.12) rotate(21deg) translateY(-14px) translateX(-12px) !important; z-index: 9999 !important; } div:nth-child(8n+8) > \[id="Group Spiritual Idol Eng"\]:not(\[style\*="opacity"\]):hover, div:nth-child(8n+8) > \[id="Group Spiritual Idol Eng"\]\[style\*="0.51"\] { transform: scale(1.12) rotate(30deg) translateY(24px) translateX(-22px) !important; z-index: 9999 !important; } /\* MOBILE ENGINE: Widens the arc spread to perfectly fill the left/right screen space \*/ @media (max-width: 600px), (max-height: 750px) { div:nth-child(n+9) { margin-top: 25px !important; } /\* Expanded Arc Tracking - Widened for a more beautiful, spacious curve \*/ div:nth-child(8n+1) > \[id="Group Spiritual Idol Eng"\] { transform: scale(0.95) rotate(-28deg) translateY(42px) translateX(-28px) !important; } div:nth-child(8n+2) > \[id="Group Spiritual Idol Eng"\] { transform: scale(0.95) rotate(-20deg) translateY(18px) translateX(-18px) !important; } div:nth-child(8n+3) > \[id="Group Spiritual Idol Eng"\] { transform: scale(0.95) rotate(-12deg) translateY(4px) translateX(-8px) !important; } div:nth-child(8n+4) > \[id="Group Spiritual Idol Eng"\] { transform: scale(0.95) rotate(-4deg) translateY(-4px) translateX(-2px) !important; } div:nth-child(8n+5) > \[id="Group Spiritual Idol Eng"\] { transform: scale(0.95) rotate(4deg) translateY(-4px) translateX(2px) !important; } div:nth-child(8n+6) > \[id="Group Spiritual Idol Eng"\] { transform: scale(0.95) rotate(12deg) translateY(4px) translateX(8px) !important; } div:nth-child(8n+7) > \[id="Group Spiritual Idol Eng"\] { transform: scale(0.95) rotate(20deg) translateY(18px) translateX(18px) !important; } div:nth-child(8n+8) > \[id="Group Spiritual Idol Eng"\] { transform: scale(0.95) rotate(28deg) translateY(42px) translateX(28px) !important; } /\* Balanced Mobile Hovers \*/ \[id="Group Spiritual Idol Eng"\]:hover { transform: scale(1.05) !important; z-index: 9999 !important; } } /\* Targets mobile screens 344px to 430px and prevents overlapping touch layers \*/ @media (max-width: 430px) and (min-width: 344px) { div:nth-child(n+9) { margin-top: 40px !important; /\* Spaces the second row to prevent overlap \*/ } div:has(> \[id="Group Spiritual Idol Eng"\]) { transform: scale(0.75) !important; height: 120px !important; /\* Shrinks invisible height to match scaled down card sizes \*/ } div:has(> \[id="RepeatingGroup cards"\]) { padding-top: 40px !important; padding-bottom: 40px !important; box-sizing: border-box !important; } } /\* Fixes footer cut-offs & overlapping on iPhone SE, Nest Hub, and Surface Duo \*/ @media (max-height: 730px) { #main-page-root { padding-bottom: 40px !important; /\* Pulls the footer safely onto the screen \*/ } div:nth-child(n+9) { margin-top: 5px !important; /\* Closes the gap between card rows \*/ } /\* Gently scales down the card footprint to fit short viewports \*/ div:has(> \[id="Group Spiritual Idol Eng"\]) { transform: scale(0.85) !important; } } /\* Specific rule for short landscape screens like Nest Hub \*/ @media (max-width: 1025px) and (max-height: 610px) { #main-page-root { height: 100vh !important; max-height: 100vh !important; justify-content: center !important; padding-bottom: 0px !important; } /\* Pulls the second row up to close the gap between rows \*/ div:nth-child(n+9) { margin-top: -30px !important; } /\* Scales cards to 0.70 and applies a smoother, more elegant arc \*/ div:nth-child(8n+1) > \[id="Group Spiritual Idol Eng"\] { transform: scale(0.70) rotate(-28deg) translateY(48px) translateX(16px) !important; } div:nth-child(8n+2) > \[id="Group Spiritual Idol Eng"\] { transform: scale(0.70) rotate(-20deg) translateY(2px) translateX(10px) !important; } div:nth-child(8n+3) > \[id="Group Spiritual Idol Eng"\] { transform: scale(0.70) rotate(-11deg) translateY(-28px) translateX(4px) !important; } div:nth-child(8n+4) > \[id="Group Spiritual Idol Eng"\] { transform: scale(0.70) rotate(-3deg) translateY(-42px) translateX(0px) !important; } div:nth-child(8n+5) > \[id="Group Spiritual Idol Eng"\] { transform: scale(0.70) rotate(3deg) translateY(-42px) translateX(0px) !important; } div:nth-child(8n+6) > \[id="Group Spiritual Idol Eng"\] { transform: scale(0.70) rotate(11deg) translateY(-28px) translateX(-4px) !important; } div:nth-child(8n+7) > \[id="Group Spiritual Idol Eng"\] { transform: scale(0.70) rotate(20deg) translateY(2px) translateX(-10px) !important; } div:nth-child(8n+8) > \[id="Group Spiritual Idol Eng"\] { transform: scale(0.70) rotate(28deg) translateY(48px) translateX(-16px) !important; } /\* Safely nudges cards closer horizontally without altering their scale \*/ div:has(> \[id="Group Spiritual Idol Eng"\]) { position: relative !important; } /\* Shift left half of the cards slightly to the right \*/ div:nth-child(8n+1):has(> \[id="Group Spiritual Idol Eng"\]), div:nth-child(8n+2):has(> \[id="Group Spiritual Idol Eng"\]), div:nth-child(8n+3):has(> \[id="Group Spiritual Idol Eng"\]), div:nth-child(8n+4):has(> \[id="Group Spiritual Idol Eng"\]) { left: 10px !important; } /\* Shift right half of the cards slightly to the left \*/ div:nth-child(8n+5):has(> \[id="Group Spiritual Idol Eng"\]), div:nth-child(8n+6):has(> \[id="Group Spiritual Idol Eng"\]), div:nth-child(8n+7):has(> \[id="Group Spiritual Idol Eng"\]), div:nth-child(8n+8):has(> \[id="Group Spiritual Idol Eng"\]) { right: 10px !important; } @media (max-width: 1024px) { #main-page-root { height: 100vh !important; max-height: 100vh !important; padding-bottom: 40px !important; /\* Pulls footer up on Zenbook/iPad widths \*/ } } @media (max-width: 912px) { #main-page-root { height: 100vh !important; max-height: 100vh !important; padding-bottom: 40px !important; /\* Pulls footer up on Zenbook/iPad widths \*/ } } @media (max-width: 770px) { #main-page-root { height: 100vh !important; max-height: 100vh !important; padding-bottom: 40px !important; /\* Pulls footer up on Zenbook/iPad widths \*/ } } /\* Safely scales down the entire cards area for medium/short screens \*/ @media (max-width: 900px) and (max-height: 800px) { div:has(> \[id="RepeatingGroup cards"\]) { transform: scale(0.35) !important; transform-origin: center center !important; } }

And these are screen-shots in case it might be helpful.

[parthapatel0723]

Toss into Chat or Claude and tell it your problem. CSS is best done that way unless you know it in and out.

[12lybg]

Thank you for the advice. I’ll try it

[boston85719]

You don’t need code. Just use bubble responsive settings. Check out some YouTube videos to learn more about responsive design in bubble.

[arslannawaz03]

The root issue here is that CSS transforms move cards visually but the browser still uses the original untransformed boxes for taps. Your translate and scale rules push cards away from their real hit areas, and every breakpoint patch is fighting that same mismatch on a different screen.

Quick fix for the tap problem:

[id="RepeatingGroup cards"] > div {
  pointer-events: none;
}
[id="Group Spiritual Idol Eng"] {
  pointer-events: auto;
}

This stops empty cell areas from stealing taps meant for the card behind them.

But honestly, the better fix is deleting most of this code. Rotation alone barely disturbs layout, it’s the translateX/Y and scale that break everything. If you build the arc with small rotations only (say -12deg to 12deg across the row) and let Bubble’s responsive engine handle card sizing and spacing natively, taps land where cards appear on every device and you don’t need a single breakpoint patch. The fanned look stays almost identical.

If you want the full arc with vertical offsets, wrap it in @media (min-width: 1024px) so only desktop gets it. Mobile users need tappable cards more than they need the curve. Also avoid scaling below ~0.8 on touch screens, your 0.35 rule shrinks tap targets to around 30px, well under the reliable touch minimum.

[12lybg]

Thank you. I’m planning to do it like that.

[12lybg]

Thank you. I will try this trick or I might just delete all of this code and do it using bubble responsive settings.