Moodle version 3.1
Adaptable Theme version 1.3.4
I am trying out some courses with the Adaptable Theme, but on a mobile device the Course Title in the course header runs off the view. I was wondering if we can use the viewport size css with the Course/Site Title to make that text responsive to screen size? Or if there was another way to make the Course/Site Title text responsive and what the css code might look like?
Hi Levi,
The real issue is, Adapt theme has applied "white-space: nowrap;" and that's why if width is less than the width of title, it gets hide, if you change it to "white-space: normal;", title will break into two if no more space available. However if you are ok with large screen and just wanted to fix for small devices, you can use following CSS.
@media screen and (max-width: 767px) {
#sitetitle{
font-size:18px;
white-space: normal;
text-align: left;
}
}
If you want to add it through UI go to BASEURL/admin/settings.php?section=theme_adaptable_generic and add it to the custom CSS field.
P.S: I havse set font size to 18px, you can adjust font-size as per your requirement.
