themesalmond / moodle-theme_almondb

5 stars 4 forks source link

Course Header Text Scaling for Mobile #33

Closed estdillon closed 8 months ago

estdillon commented 9 months ago

Good day,

If you have a course with a certain length of text as well as a course image, the course text doesn't scale with the image, which results in a horizontal scroll. See image below:

Screenshot 2024-01-22 at 10 05 44

A suggestion might be to move the course-header-txt code inside of the course-header-image code so that it scales with the image. Then change the .course-header-txt class to:

.course-header-txt { position: relative; display: block; top: 10%; padding: 10px; margin-left: 2%; margin-right: 2%; background-color: cornsilk; border-radius: 5px; }

However, this does present the case that the background of the text (show by the cornsilk colour) will extend further than the name of the course itself when in desktop view. So, I'm not sure which situation is the most ideal.

You could also use a media query and set the width to 89% but still, leaves us with the same issue.

Hope this helps!

Regards, Dillon

themesalmond commented 8 months ago

Hello, We fixed this. We published upgrade for Almondb. You can upgrade theme.

Best Regards Almond Themes