lifterlms
lifterlms copied to clipboard
gocodebox
Certificates Not Responsive on Mobile on Kadence
Reproduction Steps
- HS-168438 (this may be a feature request?)
- Create a certificate
- View the certificate on mobile
Expected Behavior
- The certificate will fit the page or at least be able to move the page to see the whole certificate
Actual Behavior
- you see only half of the certificate and cannot drag the page to see all of it.
Error Messages / Logs
- Include any relevant error messages or log files
<!-- Paste error logs / backtraces below this line -->
System and Environment Information
System Report
Wordpress
-------------------------------------------
Home Url: [removed]
Site Url: [removed]
Login Url: [removed]/wp-login.php
Version: 5.7.2
Debug Mode: No
Debug Log: No
Debug Display: Yes
Locale: fr_FR
Multisite: No
Page For Posts: Not Set
Page On Front: ACCUEIL (#1758) [[removed]/]
Permalink Structure: /%category%/%postname%/
Show On Front: page
Wp Cron: Yes
Settings
-------------------------------------------
Version: 4.21.3
Db Version: 4.21.3
Course Catalog: Course Catalog (#9) [[removed]/courses/]
Membership Catalog: Membership Catalog (#10) [[removed]/memberships/]
Student Dashboard: Dashboard (#12) [[removed]/dashboard/]
Checkout Page: Purchase (#11) [[removed]/purchase/]
Course Catalog Per Page: 9
Course Catalog Sorting: menu_order,ASC
Membership Catalog Per Page: 9
Membership Catalog Sorting: menu_order,ASC
Site Membership: Not Set
Courses Endpoint: my-courses
Edit Endpoint: edit-account
Lost Password Endpoint: lost-password
Vouchers Endpoint:
Autogenerate Username: yes
Password Strength Meter: no
Minimum Password Strength: weak
Terms Required: yes
Terms Page: Conditions Générales d'Utilisation (#813) [[removed]/conditions-generale-dutilisation/]
Checkout Names: required
Checkout Address: hidden
Checkout Phone: required
Checkout Email Confirmation: yes
Open Registration: yes
Registration Names: required
Registration Address: hidden
Registration Phone: required
Registration Voucher: hidden
Registration Email Confirmation: no
Account Names: required
Account Address: hidden
Account Phone: required
Account Email Confirmation: yes
Confirmation Endpoint: confirm-payment
Force Ssl Checkout: no
Country: MA
Currency: MAD
Currency Position: left
Thousand Separator: ,
Decimal Separator: .
Decimals: 2
Trim Zero Decimals: no
Recurring Payments: yes
Email From Address: [removed]
Email From Name: [removed]
Email Footer Text:
Email Header Image:
Cert Bg Width: 1683
Cert Bg Height: 700
Cert Legacy Compat: no
Constants
-------------------------------------------
LLMS_REMOVE_ALL_DATA: undefined
LLMS_REST_DISABLE: undefined
LLMS_SITE_FEATURE_RECURRING_PAYMENTS: undefined
LLMS_SITE_IS_CLONE: undefined
Gateways
-------------------------------------------
Manual: Enabled
Manual Logging:
Manual Order: 1
Server
-------------------------------------------
Mysql Version: 5.7.34
Php Curl: Yes
Php Default Timezone: UTC
Php Fsockopen: Yes
Php Max Input Vars: 10000
Php Max Upload Size: 50 Mo
Php Memory Limit: 512M
Php Post Max Size: 100M
Php Soap: Yes
Php Suhosin: No
Php Time Limt: 3600
Php Version: 7.4.18
Software: Apache
Wp Memory Limit: 40M
Browser
-------------------------------------------
HTTP USER AGENT: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.77 Safari/537.36
Theme
-------------------------------------------
Name: Kadence Child
Version: 1.0.0
Themeuri: https://www.kadencewp.com/kadence-theme/
Authoruri: https://www.kadencewp.com/
Template: kadence
Child Theme: Yes
Llms Support: No
Plugins
-------------------------------------------
Booster for WooCommerce: 5.4.1
Checkout Field Editor for WooCommerce: 1.4.8
Kadence Blocks - Gutenberg Blocks for Page Builder Features: 2.0.7
Kadence Custom Fonts: 1.1.0
Kadence Pro - Premium addon for the Kadence Theme: 0.9.15
Kadence Starter Templates: 1.2.3
LifterLMS: 4.21.3
LifterLMS Advanced Quizzes: 1.1.1
LifterLMS Advanced Videos: 1.0.0-beta.14
LifterLMS Assignments: 1.1.13
LifterLMS Custom Fields: 1.0.2
LifterLMS Formidable Forms: 1.0.3
LifterLMS Gravity Forms: 2.1.1
LifterLMS Helper: 3.2.1
LifterLMS Ninja Forms: 1.1.0
LifterLMS PDFs: 1.0.0
LifterLMS Private Areas: 1.1.2
LifterLMS Social Learning: 1.4.0
LifterLMS WooCommerce: 2.1.3
LifterLMS WPForms: 1.1.1
Loco Translate: 2.5.2
Ninja Forms: 3.5.5
Prevent Concurrent Logins: 0.4.0
Redirection: 5.1.1
Regenerate Thumbnails: 3.1.5
WooCommerce: 5.4.0
WP Maintenance Mode: 2.4.0
Integrations
-------------------------------------------
BbPress: No
BuddyPress: No
LifterLMS Formidable Forms: No
LifterLMS Gravity Forms: No
LifterLMS Ninja Forms: No
WooCommerce: Yes
LifterLMS WPForms: No
LifterLMS Private Areas: Yes
LifterLMS Social Learning: Yes
Videos: Vimeo: Yes
Videos: Wistia: No
Videos: YouTube: Yes
Template Overrides
-------------------------------------------
course/lesson-preview.php (ver: 4.4.0): /nas/content/live/learningd/wp-content/themes/kadence/lifterlms/ (ver: 4.4.0)
course/syllabus.php (ver: 4.4.0): /nas/content/live/learningd/wp-content/themes/kadence/lifterlms/ (ver: 4.4.0)
This issue has be recreated:
- [X] Locally
- [X] On a staging site
- [X] On a production website
- [ ] With only LifterLMS and a default theme
Browser, Device, and Operating System Information
- Browser name and version
- Operating System name and version
- Device name and version (if applicable)
@nrherron92 thanks for reporting this.
Alright, Kadence has a CSS code that hides whatever overflows its page wrapper (#wrapper).
Certificates are not responsive, we know, they're not meant to be responsive.
Should we add specific CSS compat for Kadence @thomasplevy ?
@nrherron92 Can this be reported to Kadence directly and see if they feel this is something they can fix with their LifterLMS integration rather than us having to add CSS specific to the Kadence theme?
Thanks, let us know what they say. And I think we can fix this but I'm not sure it wouldn't be better to handle it from the Kadence side, that's all
@nrherron92 guessing there's no response / movement on this from the Kadence side, @chrisbadgett any thoughts on what should we do here?
- Ignore it and leave it as a "known" conflict
- Try to reach out to Kadence more/again
- Fix it from our side by adding explicit CSS to accommodate the Kadence theme (note: we currently have no explicit theme support css for any themes other than WP Default themes and LaunchPad. The precedent here is important to me but I'm not unwavering).
@gocodebox/main any thoughts on how to proceed with this stale issue / conflict?
I think adding the CSS to our documentation would be a good idea until they fix this in their theme. But again, adding CSS for LifterLMS CSS might feel like an edge case for them. So, the only option I can think of having documentation about this issue.
And I agree that the certificate image should fit the viewport or at least scroll if not possible.
I think we can leave it as a known conflict with that code snippet we can hand over as workaround when users stumble across the issue. I don't think we need to specifically accomodate third party themes for something this small.
@nrherron92 did we already write the CSS somewhere? If so @willmiddleton-lifterlms on you to write the docs.
Ah sorry! Yes here:
.llms-certificate-wrapper { overflow: unset !important; }
We created a document today for that: https://lifterlms.com/docs/faq-how-to-fix-certificate-formatting-issue-with-the-kadence-theme/
Feel free to drop any feedback
