Width of Overlay Panel

  • Webkiter
    April 2, 2026 at 3:01 am

    Hi there,

    when you click on the button “Listen to our Podcast” – you’ll find the green button in the menu – an overlay panel appears and listeners can pick their preferred language.

    No matter how much px I give the overlay panel in width – the format and size stays the same.
    I would like to align the 4 languages in one row. How can I achieve that on desktop?

    Thanks in advance!

  • George
    April 2, 2026 at 3:43 am

    Hello,

    Just increase the grid’s grid-template-columns to repeat(4, minmax(0, 1fr))

  • Webkiter
    April 7, 2026 at 1:26 am

    Hello George,

    thank you.

    That was already the case.

    What else can I do?

  • Webkiter
    April 7, 2026 at 1:38 am

    For some reason it worked now but I don’t know why.

    I created a copy of the grid with it’s buttons inside.
    Then I transformed the buttons into paragraphs and then both grid showed in a row of 4 items. Strange!

    But how can I get rid of the thin grey line above the language buttons?
    I cannot find the border to delete it.

    In the editor – link to screenshot in the private info – there’s no grey fine line.

    It seems to be very buggy.
    Otherwise this isn’t explainable.

    Any ideas?

    Thanks in advance!

  • George
    April 7, 2026 at 3:16 am

    Hello,

    In your overlay, select the Choose the language you’d like to listen in: text and from the right below Borders, remove the 5px bottom border.

    Bottom border

  • Webkiter
    April 9, 2026 at 12:58 am

    Hi George,

    I looked that up – also yesterday.
    I cannot find the border you mentioned.

    I then looked up the second-step-overlay which appears when someone picks a language – there I found the border and deleted it. Now it’s gone like I want it.

    But why does the second overlay influence the graphics of the first overlay?
    Aren’t those 1st and 2nd step overlays independent from each other?

    Also:
    On mobile phone I am not able to influence the width of the overlay panel. No matter what width I set, it stays the same. How can I set it to the width of the screen of any mobile phone?

    And:
    When you pick English as your preferred language the second step overlay appears and all podcast icons and texts show up: Apple, Spotify and Amazon – like I want it.

    But:
    When I click on “Deutsch” / “Türkçe” and so on all texts show up and the icons for Spotify and Amazon also, BUT NOT Apple – why? I haven’t deleted it in German, Türkçe and so on. I added a screenshot below.

    Thanks a lot!

  • Alvind
    April 9, 2026 at 7:24 pm

    Hi there,

    But why does the second overlay influence the graphics of the first overlay?
    Aren’t those 1st and 2nd step overlays independent from each other?

    From a code perspective, my assumption is that both overlays are sharing the same generated class or duplicated block ID. If one of them has styling applied (for example a border), the other one can inherit the same styling because they’re effectively targeting the same selector.

    If this is caused by a duplicated block ID, the usual fix is to edit one of the overlays, duplicate it, and then remove the original block. That forces WordPress/GenerateBlocks to generate a fresh unique block identifier, which usually resolves the issue.

    On mobile phone I am not able to influence the width of the overlay panel. No matter what width I set, it stays the same. How can I set it to the width of the screen of any mobile phone?

    The width is currently being controlled in multiple places:
    – The local block itself: .gb-element-4bf9a36e
    – The .podcast-overlay Global Style

    Try removing the width values on tablet and mobile breakpoints in both locations. If one width rule is still present, it can continue overriding the other setting.

    Lastly, regarding the Apple Podcast icon issue, this is being caused by a duplicate SVG ID conflict across the four language overlays.

    Each Apple Podcast icon SVG includes a <linearGradient> definition like this:

    <defs>
  <linearGradient id="a">

    and the paths reference it with:

    
fill="url(#a)"

    The issue is that all four overlays are using the same id="a", which violates the HTML requirement that IDs must be unique in the DOM. Because of that, one SVG can accidentally reference the gradient definition from another overlay.

    The technical fix would be to give each overlay’s Apple icon gradient a unique gradient ID and update the matching fill="url(#...)" reference accordingly.

    That said, my practical recommendation would be to replace the icon with a different SVG from another source, as that’s usually much simpler than manually editing all of the gradient IDs across multiple language versions.

Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.