Message displaying oddly - Non subscriber trying to access subscriber level directly

This site shows up like the image below for Safari and Firefox.

I didn’t know if this was intentional but the vertical centering seems to be off.

Feel free to report bugs here:

I added the bug. Thank you.

This is also happening on the Wakka Maul level for multiplayer when accessed from a free account:


So I looked into this bug and it appears that the code in app.css may be causing the issue:

#level-loading-view #loading-details .progress-or-start-container .subscription-required, #level-loading-view #loading-details .progress-or-start-container .course-membership-required, #level-loading-view #loading-details .progress-or-start-container .could-not-load {
    display: none;
    margin-top: -160px;
    color: black;
    font-size: 24px;
}

In particular the `margin-top: -160px;

is affecting the <div class="course-membership-required"> tag or .course-membership-required

so by using Safari’s built in Web Inspector I removed it and it seemed to fix the styling issues as show below:

HTML change:

OR:

I don’t know if this is the desired way to have the content displayed. But margin-top is what is affecting the content.

I normally would suggesting just adding something like:

to app.css if this was the right way to fix it. But that didn’t work as I expected it would in Safari Live…


Applying this same technique to the <div class="subscription-required"> tag fixes it as well