Audio controls don't display properly on small screens

[rogerssam]

Hi Dan,

First off, thanks so much for your work on this theme :)

There seems to be an issue where custom CSS styles are overriding the plyr.io icon styling, making them appear stretched on mobile/small screens. This is evident in the Gympie Presbyterian site (e.g. see https://gympiepresbyterian.org.au/sermons/easter-2023-long-live-the-king/ on mobile).

It seems to be coming from this line here but it could be one of the others around that area somewhere.

Happy to submit a PR if I can help at all, or help with further diagnostics.

[funkydan2]

Thanks for this—I haven't looked at how audio controls show up on mobile for quite some time, and you're right...that's not usable at all.

Very happy for a PR or suggestions on where to look—I'm no CSS expert!

[funkydan2]

Ok, so I get some progress by inserting this at line 932 of main.css:

input[type="submit"],
input[type="reset"],
input[type="button"],
button,
.button,
:not(.plyr),
:not(.plyr__control) {
        width: 100%;
             &.icon {
             &:before {
            margin-left: -0.5em;
             }
        }
    }

But I'm not sure why <div class="plyr__controls__item plyr__progress__container"></div> also seems to be controlled by the width=100% from the Button CSS.

[rogerssam]

Ok, so I get some progress by inserting this at line 932 of main.css:

input[type="submit"],
input[type="reset"],
input[type="button"],
button,
.button,
:not(.plyr),
:not(.plyr__control) {
      width: 100%;
           &.icon {
           &:before {
          margin-left: -0.5em;
           }
      }
  }

Nice work! Will test out in a minute.

But I'm not sure why <div class="plyr__controls__item plyr__progress__container"></div> also seems to be controlled by the width=100% from the Button CSS.

Yeah I'm not sure (and no CSS expert either), but just noticed that's what changed when moving to that breakpoint, and turning off the width: 100% seemed to fix it (but unsure if it breaks anything else).

[funkydan2]

Ok. I think commit https://github.com/funkydan2/alpha-church/commit/3217eae9e7e76005563e0557901c61cd04194a33 fixes this well enough. I can't see anything broken by this, but will keep this issue open for now in case something is discovered.

[rogerssam]

Thanks very much! Confirmed on my end as well that this has fixed the issue. Happy for you to close whenever you're ready.