@memrise please make adaptive web interface like below.
Try this code in Firefox userContent.css for testing.
@-moz-document url-prefix(https://www.memrise.com/) {
* {
-webkit-box-shadow: none !important;
-moz-box-shadow: none !important;
box-shadow: none !important;
font-family: Verdana, Tahoma, Calibri, sans-serif !important;
line-height: normal !important;
overflow: visible;
padding: 0 !important;
text-overflow: unset !important;
white-space: normal !important;
word-wrap: break-word !important;
}
html {
background-color: rgb(255, 255, 255) !important;
font-family: Verdana, Tahoma, Calibri, sans-serif;
font-size: 10px !important;
min-width: 320px !important;
}
body {
background-color: rgb(255, 255, 255) !important;
font-family: Verdana, Tahoma, Calibri, sans-serif;
font-size: 10px !important;
min-width: unset !important;
}
.session-header {
display: flex !important;
justify-content: center !important;
height: 52px !important;
margin: 0 auto !important;
text-align: center !important;
width: unset !important;
}
.session-header .header-block.header-left {
align-items: center !important;
display: flex !important;
justify-content: space-between !important;
line-height: 52px !important;
margin: 0 !important;
text-align: left !important;
width: unset !important;
}
.session-header .header-block.header-left .session-logo-wrapper {
display: none !important;
}
.session-header .header-block.header-middle {
margin: 0 !important;
min-width: 176px;
width: unset !important;
}
.session-header .header-block.header-middle .course-details-wrapper {
align-items: center !important;
display: flex !important;
height: 48px !important;
line-height: normal !important;
justify-content: space-between !important;
margin: 0 !important;
overflow: hidden !important;
position: relative !important;
width: unset !important;
}
.session-header .header-block.header-middle .course-details-wrapper .course-details {
display: flex !important;
flex-direction: column !important;
height: auto !important;
justify-content: center !important;
margin: 0 !important;
padding: 0 4px !important;
width: unset !important;
}
.session-header .header-block.header-middle .course-details-wrapper .course-details .course-info {
font-size: 12px !important;
height: auto !important;
letter-spacing: 0 !important;
max-height: 16px !important;
max-width: unset !important;
overflow: hidden !important;
text-align: left !important;
width: unset !important;
}
.session-header .header-block.header-middle .course-details-wrapper .course-details .course-title {
color: rgb(255, 255, 255) !important;
display: block !important;
font-size: 12px !important;
height: auto !important;
letter-spacing: 0 !important;
max-height: 32px !important;
max-width: unset !important;
overflow: hidden !important;
text-align: left !important;
width: unset !important;
}
.session-header .header-block.header-middle .course-details-wrapper .header-points {
height: auto !important;
margin: 0 !important;
padding: 0 4px !important;
text-align: center !important;
max-width: 6em !important;
width: unset !important;
}
.session-header .header-block.header-middle .course-details-wrapper .header-points .points-wrapper {
display: block !important;
margin: auto !important;
}
.session-header .header-block.header-middle .course-details-wrapper .header-points .points-num {
display: block !important;
font-size: 10px !important;
padding: 2px 4px !important;
text-align: center !important;
}
.session-header .header-block.header-middle .bar-wrapper {
border-radius: 2px !important;
height: 4px !important;
}
.session-header .header-block.header-right {
display: block !important;
line-height: 4em !important;
margin: 0 !important;
width: unset !important;
}
.session-header .header-block.header-right .header-exit {
display: block !important;
line-height: 4em !important;
margin: 0 !important;
text-align: center !important;
width: 48px !important;
}
.session-header .header-block.header-right .header-exit .session-exit {
background-position: center center;
background-repeat: no-repeat;
display: block !important;
height: 48px !important;
line-height: 4em !important;
margin: 0 !important;
text-align: center !important;
width: 48px !important;
}
#page-head {
min-height: 64px;
}
.courses-filter-container {
margin: -48px 0 0 !important;
}
.courses-filter-container a.button{
line-height: 32px !important;
padding: 0 8px !important;
}
.courses-filter-container .select-container {
line-height: 32px !important;
padding: 0 8px !important;
}
.gardening-area {
display: flex !important;
justify-content: space-between !important;
margin: 16px auto !important;
padding: 0 8px !important;
}
#left-area {
display: none !important;
}
#right-area {
display: none !important;
}
#central-area {
max-width: 600px !important;
margin: 0 !important;
width: 100% !important;
}
.garden-box.end_of_session {
left: 0 !important;
width: auto !important;
}
.garden-box.end_of_session .summary .table .item {
margin: 0 !important;
padding: 8px !important;
}
.garden-box.end_of_session .leaderboard-wrapper {
width: auto !important;
}
.garden-box.multiple_choice ol.choices,
.garden-box.video-pre-presentation ol.choices {
align-items: center !important;
display: flex !important;
flex-direction: column !important;
margin: 0 auto !important;
}
.garden-box.multiple_choice ol.choices li,
.garden-box.video-pre-presentation ol.choices li {
line-height: normal !important;
margin: 8px auto !important;
padding: 4px 8px !important;
text-align: left !important;
width: 100% !important;
}
.garden-box.multiple_choice ol.choices li .val,
.garden-box.video-pre-presentation ol.choices li .val {
min-height: unset !important;
}
.garden-box.multiple_choice ol.choices.grid li {
width: 100% !important;
}
.garden-box.audio-multiple-choice .audio-choices {
transform: scale(0.5) !important;
}
.garden-box.audio-multiple-choice .audio-choices .audio-choices-row {
height: auto !important;
}
.garden-box .shiny-box {
border-color: rgb(224, 224, 224) !important;
color: rgb(0, 0, 0) !important;
font-size: 14px !important;
line-height: normal !important;
padding: 8px 16px !important;
}
.garden-box .shiny-box.active {
background-color: rgb(244, 255, 244) !important;
}
.garden-box.tapping .word.active {
background-color: rgb(244, 244, 244) !important;
}
.shiny-box.choice > .index,
.shiny-box.choice > .marking-icon {
display: none !important;
}
.shiny-box.choice > .val {
color: rgb(70, 70, 70) !important;
font-size: unset !important;
line-height: normal !important;
}
.garden-box .hint {
display: none !important;
}
.garden-box {
padding: 0 56px 0 0 !important;
}
.garden-box.multiple_choice {
padding: 0 64px 0 0 !important;
}
.garden-box.tapping {
padding: 0 64px 0 0 !important;
}
.garden-box.tapping .hint {
display: none !important;
}
.garden-box.tapping .word-box-response {
min-height: 42px !important;
}
.garden-box .typing-wrapper {
font-size: normal !important;
}
.garden-box .typing-wrapper .typing-type-here {
height: auto !important;
line-height: normal !important;
padding: 4px 8px !important;
}
.garden-box .keyboard {
width: auto !important;
}
.garden-box .keyboard a {
min-width: 2em !important;
position: static !important;
}
.question-row {
display: flex !important;
margin: 0 0 16px auto !important;
min-height: 64px !important;
}
.question-row .graphic {
background-position: -128px 0 !important;
background-size: 192px 32px !important;
height: 32px !important;
margin: 0 8px 0 0 !important;
min-width: 32px !important;
width: 32px !important;
}
.question-row .qquestion {
font-size: 1.8em !important;
line-height: normal !important;
/*padding: 0 0 0 8px !important;*/
width: auto !important;
}
.question-row.video-dictation {
display: block !important;
margin: 0 auto 16px !important;
}
.question-row .qquestion.video-dictation {
}
.thing-show{
margin: 16px 0 0 auto !important;
}
.badge {
background-color: rgb(244, 244, 244) !important;
color: rgb(0, 0, 0) !important;
padding: 4px 8px !important;
}
.thing-show .columns{
margin: 40px auto 0 !important;
position: relative !important;
display: flex !important;
flex-direction: column;
align-items: flex-start !important;
justify-content: flex-start !important;
}
.thing-show .columns .show-more-link,
.thing-show .columns .show-less {
font-size: normal !important;
margin: 4px 0 !important;
order: 5 !important;
padding: 4px 8px !important;
position: static !important;
}
.thing-show .row {
border: none !important;
margin: 4px 0 !important;
}
.thing-show .row.first-audio {
top: -40px !important;
}
.thing-show .row.first-audio .audio-player {
margin: 0 32px 0 0 !important;
}
.thing-show .row.primary .row-value {
font-size: 1.5em !important;
margin: 0 auto !important;
width: auto !important;
}
.thing-show .row.secondary .row-value {
font-size: 1.2em !important;
margin: 0 auto !important;
width: auto !important;
}
.thing-show .row .row-label{
display: none !important;
top: 0 !important;
}
.thing-show .row .row-value {
font-size: 1.2em !important;
margin: 0 auto !important;
width: auto !important;
}
.word-box-response {
background-color: rgb(255, 255, 255) !important;
border-color: rgb(204, 204, 204) !important;
border-width: 1px !important;
}
button {
font-size: 1em !important;
}
button.next-button {
display: block !important;
height: 48px !important;
right: 4px !important;
top: 0 !important;
width: 48px !important;
}
button.next-button .next-icon {
display: none !important;
}
button.next-button .next-text {
font-size: 1em !important;
position: static !important;
}
.garden-box.presentation > .ico-ignore {
right: 10px !important;
top: 64px !important;
}
.garden-box.presentation > .star {
right: 10px !important;
top: 104px !important;
}
.garden-box .ico-growth {
right: 4px !important;
top: 128px !important;
width: 48px !important;
}
.btn {
font-size: 1em !important;
}
.btn.word {
background-color: rgb(255, 255, 255) !important;
background-image: none !important;
border-color: rgb(204, 204, 204) !important;
border-width: 1px !important;
color: rgb(70, 70, 70) !important;
font-size: 1.5em !important;
line-height: normal !important;
padding: 4px 8px !important;
}
.btn.word > .input-number {
display: none !important;
}
.difficult-items .whitebox .wrapper .table {
display: table !important;
font-size: 1em !important;
}
.difficult-items .whitebox .wrapper .table .tr {
display: table-row !important;
font-size: 1em !important;
}
.difficult-items .whitebox .wrapper .table .tr .tc {
display: table-cell !important;
font-size: 1em !important;
padding: 4px 8px !important;
vertical-align: middle !important;
width: auto !important;
}
.difficult-items .whitebox .ico-growth {
background-size: 40px 660px !important;
height: 40px !important;
position: static !important;
width: 40px !important;
}
.difficult-items .whitebox .ico-growth.lev1 {
background-position: 0 -80px !important;
}
.difficult-items .whitebox .ico-growth.lev2 {
background-position: 0 -160px !important;
}
.difficult-items .whitebox .ico-growth.lev3 {
background-position: 0 -240px !important;
}
.difficult-items .whitebox .ico-growth.lev4 {
background-position: 0 -320px !important;
}
.difficult-items .whitebox .ico-growth.lev5 {
background-position: 0 -400px !important;
}
.difficult-items .whitebox .ico-growth.lev6 {
background-position: 0 -480px !important;
}
.difficult-items .whitebox .btn-group {
position: static !important;
}
.difficult-items .whitebox {
border: none !important;
}
.difficult-items .whitebox .wrapper {
}
#single-continue-wrapper > div {
align-items: center !important;
display: flex !important;
justify-content: center !important;
}
.garden-box.end_of_session .course_box .bottom.goal-setter-active {
margin: 16px auto !important;
}
.ico-arr-right {
display: none !important;
}
.leaderboard {
font-size: 1em !important;
}
.leaderboard-container.wide .leaderboard-controls {
float: none !important;
margin: 16px auto !important;
}
.leaderboard .leaderboard-controls ul.btn-group {
margin: 0px auto !important;
display: flex !important;
justify-content: center !important;
}
.leaderboard-rows {
display: table !important;
font-size: 1em !important;
height: auto !important;
line-height: auto !important;
width: 100% !important;
}
.leaderboard-rows > .leaderboard-row {
display: table-row !important;
font-size: 1em !important;
height: auto !important;
line-height: auto !important;
}
.leaderboard-rows > .leaderboard-row > * {
display: table-cell !important;
font-size: 1em !important;
height: auto !important;
line-height: auto !important;
padding: 4px 8px !important;
vertical-align: middle !important;
width: auto !important;
}
.single-continue-button-arrow {
display: none !important;
}
.course-card-container .course-progress-box .card-top {
display: flex !important;
}
.course-card-container .course-progress-box .card-top .card-main-container {
width: 100% !important;
}
.course-card-container .course-progress-box .card-top .card-main-container .detail {
width: auto !important;
}
.course-card-container .course-progress-box .card-top .card-main-container .detail .title {
max-height: unset !important;
min-height: unset !important;
}
.course-card-container .course-progress-box .card-bottom {
background-color: unset !important;
max-height: unset !important;
min-height: unset !important;
}
.course-card-container .course-progress-box .card-bottom * {
font-size: 1em !important;
}
.course-card-container .course-progress-box .card-bottom .course-actions {
align-items: center !important;
display: flex !important;
justify-content: flex-end !important;
height: auto !important;
margin: 16px 0 !important;
}
.course-card-container .course-progress-box .card-bottom .course-actions > * {
margin: 0 8px !important;
}
.course-card-container .course-progress-box .card-top .card-main-container .top-main .wrapper {
display: flex !important;
flex-direction: column !important;
}
.pull-right {
text-align: right !important;
margin: 16px 0 !important;
}
.mode-selector-button {
border-width: 1px !important;
border-color: rgb(224, 224, 224) !important;
border-style: solid !important;
height: 48px !important;
min-width: unset !important;
}
.single-continue-button {
font-size: 1em !important;
min-width: unset !important;
padding: 0 8px !important;
}
.single-continue-button * {
font-size: 1em !important;
min-width: unset !important;
}
.single-continue-button > div {
align-items: center !important;
display: flex !important;
height: 48px !important;
}
.course-card-container {
margin: 16px 0 !important;
border-width: 1px !important;
border-color: rgb(224, 224, 224) !important;
border-style: solid !important;
border-radius: 10px !important;
padding: 8px !important;
}
.garden-box .shiny-box.correct {
background-color: rgb(244, 255, 244) !important;
}
.garden-box.end_of_session .next_btn {
float: none !important;
}
}
