Applying custom layout element to mobile only

Hi Jeffrey,

Thank you for reaching out to us regarding your concern.

To confirm, what changes would you like to make directly to the mobile view only? Providing custom CSS might be the most appropriate approach to this.

For instance, if you wish to add left and right padding for the content on mobile only, a CSS like this would work:

@media (max-width: 768px) {
    .content-area {
        padding: 0 20px;
    }
}

Here is an article with regards to adding CSS: https://docs.generatepress.com/article/adding-css/#additional-css

Adding it through additional CSS should work.

Kindly let us know and we’ll try our best to provide the best solution for you. :)

Hi there,

Thank you for your prompt reply. I would like to add padding to all Learndash pages on mobile (courses, topics, lessons, quizzes). I can target those specific pages on the layout element, though it includes mobile and desktop.

Would you be able to teach me a way to target specific pages with the above CSS code?

Thank you for your assistance.

Hi there

you can try targeting a learndash body class

@media (max-width: 768px) {
    .learndash-cpt .content-area {
        padding: 0 20px;
    }
}

I am not sure if .learndash-cpt will select all the templates you need, let us know

Hi David,

That seems to have solved it! Thank you for providing me with that.

You're welcome