Tagged: ,

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • May 17, 2020 at 8:26 pm #1213858
    Braedon McLeod

    Hey there!

    I seem to be having an issue with LearnDash’s Focus Mode displaying correctly on Mobile. I’ve narrowed it down to an issue with Enfold – as changing to Twenty Twenty seems to fix the issue.

    The top header of the LearnDash platform goes beyond the width of the viewable window on mobile. When Enfold is not the active theme, the Learndash header sizes appropriately to 100%.

    I am running the Enfold theme version 4.7.4 and LearnDash version 3.1.7 on WordPress 5.4.1

    Is this an issue anyone has heard of? Hopefully with a quick fix? 🤞🏼

    May 19, 2020 at 4:43 am #1214173
    Rikard

    Hey Braedon,

    Sorry for the problem. Could you post a link to where we can see the problem in question please?

    Best regards,
    Rikard

    May 19, 2020 at 8:10 am #1214218
    Braedon McLeod

    Hey!

    It can be viewed on the page attached as an example. It is occuring on all mobile Learn Dash Focus Mode pages though (Lessons + Topics).

    Thanks!
    B

    May 21, 2020 at 4:10 am #1214861
    Rikard

    Hi,

    Thanks for that. I’m not sure I understand the problem though, I think we need to be logged in to be able to see the problem? If so then please post admin login details in private. If possible then please include a screenshot highlighting the issue as well.

    Best regards,
    Rikard

    May 21, 2020 at 4:15 am #1214862
    Braedon McLeod

    It can be viewed on any phone browser without logging in at the URL below. I just changed some settings and realized the URL had been updated since I last posted, but the error should show up for you now.

    May 21, 2020 at 4:18 am #1214863
    Braedon McLeod

    Also, this is from the plugin developer:

    “Apart from that, you may want to contact support for that theme to have them look into why their theme is overriding values and what they would suggest as a fix. For some reason, on our focus mode page the theme appears to keep the window width at 910px even though the actual device width is much smaller.”

    and they provided the following CSS which fixes it in some scenarios, but I’ve removed it so you guys can take a look at the issue:

    @media screen and ( max-width: 568px ) {
    .ld-in-focus-mode {
    max-width: calc( 100% – 60% );
    }
    }

    May 27, 2020 at 3:51 pm #1217000
    Ismael

    Hi,

    We can’t really see the page without logging in because it contains restricted content. Please provide a user account in the private field so that we can check the issue.

    Thank you for your patience.

    Best regards,
    Ismael

    June 1, 2020 at 8:01 pm #1218509
    Braedon McLeod

    Hey there!

    Apologies for that, we needed to launch the website so had to add the above-mentioned code as a quick fix for the issue. I’ve duplicated the entire website and stripped it down a little bit. I removed the page restrictions so you should be able to see the issue again at the link in PC. I’ve also put a link to the LearnDash demo that shows what things should look like on mobile.

    Again, the plugin developer said it was an issue with Enfold overwriting some of the plugins files, which doesn’t happen in any other theme.

    Thanks!
    Braedon

    June 3, 2020 at 1:37 pm #1219049
    Ismael

    Hi,

    Thank you for creating a staging site. We can see the issue now. In order to fix it, we have to override the default minimum width of the html container. Please add this code in the Quick CSS field or the child theme’s style.css file.

    @media only screen and (max-width: 1024px) {
    html {
	min-width: 0;
    }
}

    Please don’t forget to toggle the Performance > File Compression settings and remove the cache.

    Best regards,
    Ismael

    June 3, 2020 at 5:15 pm #1219153
    Braedon McLeod

    That’s perfect.

    Thanks so much for your help! I’ll share this solution with the plugin developers as well so hopefully you get less support requests for this issue.

    Thanks again,
    Braedon

    June 3, 2020 at 5:47 pm #1219190
    Jordan Shannon

    Hi,

    Did you need additional help with this topic?

    Best regards,
    Jordan Shannon

    June 3, 2020 at 5:49 pm #1219193
    Braedon McLeod

    No sir.

    You can close the thread if you need, this solution worked.

    Braedon

    June 3, 2020 at 5:51 pm #1219195
    Jordan Shannon

    Hi,

    If you need additional help, please let us know here in the forums.

    Best regards,
    Jordan Shannon

  • Author
    Posts
Viewing 13 posts - 1 through 13 (of 13 total)
  • The topic ‘Learndash Focus Mode on Mobile’ is closed to new replies.