Opened 3 years ago

Closed 2 years ago

#5842 closed defect (bug) (fixed)

CSS issue in Contributor Training Quiz Buttons

Reported by: circlecube's profile circlecube Owned by:
Milestone: Priority: normal
Component: Site Keywords: has-screenshots


I'm seeing a CSS issue in the community deputy training modules with the quiz buttons.

Go to any quiz and you'll see that the buttons at the end are cut off or look cropped. Still usable and mostly legible, but certainly looks like something is broken (see attachments).

Tested in latest chrome, firefox and safari on mac os catalina 10.15.7 with same results on all. Viewing on android OS chrome does not have the issue.

Attachments (3)

Change History (5)

#1 @circlecube
3 years ago

  • Keywords has-screenshots added

Looks like the site has a bunch of custom css rules that are tweaking the block styles and the sensei plugin styles, so not sure a patch would make sense here.

Fixes when adding something along the lines of:

.wp-block-buttons .wp-block-button button {
    height: 100%;

As it's set up now I would guess adding to the custom CSS that is added to the page would suffice at whatever specificity makes sense. Anyone with permissions who can test the fix?

Should also ensure that the fix here doesn't negatively impact mobile layout.

#2 @dd32
2 years ago

  • Resolution set to fixed
  • Status changed from new to closed

Thanks @circlecube - Sorry it took so long for a response to this ticket :(

I've updated the site using a similar style to what you proposed, it already had the lesson/course one there, so I've just merged it in there.

.lesson a.button,
.course a.button,
.quiz .wp-block-buttons .wp-block-button button {
	height: auto;
Note: See TracTickets for help on using tickets.