Adaptable - mobile formatting not displaying as expected

Adaptable - mobile formatting not displaying as expected

by Scott Spence -
Number of replies: 5

Hi Moodle community, 

I am using Adaptable Release 3.10.1.2, version 2021022302 on Moodle 3.10.3 (Build: 20210325).

Here is the formatting in a non-responsive, non-mobile view: 



The same content on the mobile / responsive view is as follows: 



It appears that at least headings and bulletpoints are not formatting correctly, I'm familiar with modifying css but thought I'd mention this in case it is a solution with an easy fix, or a bug that might need addressing, or - even better - an obvious config change that someone can point out. Thanks

Scott

Average of ratings: -
In reply to Scott Spence

Re: Adaptable - mobile formatting not displaying as expected

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers
Will be a CSS change. Issue logged.
Average of ratings: -
In reply to Gareth J Barnard

Re: Adaptable - mobile formatting not displaying as expected

by Scott Spence -
For those that want a quick fix I added this to the Adaptable custom CSS/JS section (as css in this case), it appeared that the bullet text margin issue and h4 font issue appeared at screens 575px and less. 

@media (min-width: 0px) and (max-width:575px){

/*To display bullets with text move the text to the right a bit */
.content li{
    margin-left: 20px;
}

/* To display the h4 headings as bold */
h4{
    font-weight: 800 !important;
}
}
I'm sure there is a better smoother way to do this but this is the quick and dirty method. 
Average of ratings: -
In reply to Scott Spence

Re: Adaptable - mobile formatting not displaying as expected

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers
Why do you have '(min-width: 0px)' ?
Average of ratings: -
In reply to Gareth J Barnard

Re: Adaptable - mobile formatting not displaying as expected

by Scott Spence -
I have tested and this is not required - which makes sense.

However it is used by other cascading style sheets that were providing styles to the mobile layout so I thought it might be required.
Average of ratings: -
In reply to Scott Spence

Re: Adaptable - mobile formatting not displaying as expected

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers
That's odd as I've just searched all of my style sheets and I can't find anywhere where '(min-width: 0px)' is used with a media query.
Average of ratings: -