Hey,
I’m implementing the LearnDash LMS on top of the Enfold Theme and noticed a responsiveness issue on pages like this when viewport is less than 910px: https://staging.thedancedojo.com/lessons/putting-your-four-basics-together/
It appears there is a CSS property setting a min-width:
html {min-width: 910px;} and it’s coming from the file /enfold/css/grid.css?ver=4.6.3.1
What would be the best way to restore the responsiveness without creating any css that conflicts with other theme elements?
Thanks!
Hey dancedojo,
Here is the code you can put in Enfold > General Styling > Quick Css, if it does not work, put into themes/enfold/css/custom.css
body.ld-in-focus-mode, body.ld-in-focus-mode .learndash-wrapper {
max-width: 100vw;
}
If you need further assistance please let us know.
Best regards,
Victoria
Hi Victoria,
Thanks for that. It kind of worked. The content is now in the viewport but there is a horizontal overflow because the min-width 910px is still coming from grid.css. The horizontal overflow is much more obvious when you’re on a mobile device (portrait) and swipe left.
I tried a few things to hide the overflow but it didn’t work. What would you recommend?
Hi,
Thank you for the update.
Try to override the default style by adding the following code in the Quick CSS field or in the child theme’s style.css file.
html {
min-width: 0 !important;
}
Best regards,
Ismael
Thanks Ismael, that worked!
Hi,
Did you need further help on this topic or shall we close?
Best regards,
Jordan Shannon
You can go ahead and close it. Thanks.
Hi,
If you need additional help, please let us know here in the forums.
Best regards,
Jordan Shannon