Hide/Move LearnDash topic dots & 'back to lesson' button on mobile devices

learndash-hide-move-topic-dots-mobile.css

/**
 * These styles should be copied & pasted to a child theme or the "Additional CSS"
 * area of the WordPress Customizer.
 *
 * NOTE: You can change 600px to another value. Any screen sizes BELOW this width
 * will receive the following styles.
 */

/* Hide topic dots on screens below 600px */
@media (max-width: 600px) {

	.learndash .learndash_topic_dots.type-dots {
		display: none;
	}

}

/* Hide 'back to lesson' button on screens below 600px */
@media (max-width: 600px) {

	#learndash_back_to_lesson {
		display: none;
	}

}

/* Hide BOTH topic dots AND 'back to lesson' button on screens below 600px
 * Here I'm just combining both selectors and giving them a display of none. */
@media (max-width: 600px) {

	.learndash .learndash_topic_dots.type-dots,
	#learndash_back_to_lesson {
		display: none;
	}

}

/* Move topic dots & 'back to lesson' button below the topic content */
@media (max-width: 600px) {

	/* This is necessary */
	.learndash.learndash_post_sfwd-topic {
		display: flex;
		flex-direction: column;
	}

	/* The lower the number, the sooner it will appear on the page.
	 * ex: 10 is lower than 11, so it will appear first.
	 * You could switch these numbers if you wanted the 'back to lesson' button
	 * to appear first, followed by the topic dots.
	 */
	.learndash .learndash_topic_dots.type-dots {
		order: 10;
	}

	#learndash_back_to_lesson {
		order: 11;
	}

}