With mobile devices, many of the blocks are incorrectly sized. I am working on my own theme using bootstrapbase as a parent.
What is just as weird is when I click on the block (in an attempt to inspect the element using chrome dev tools), the container then resizes itself to the appropriate size.
I have attached a screenshot to provide a visual reference to the issue.
Has anyone experienced this? If so, have you found a solution?
Thanks!
Hi, which version of Moodle are you using? I am sure this has been fixed.
What is happening is that the block is retaining the width percentage from the original CSS rule (something like 22% or 23%) for span3 and span4 for the side-pre. Whereas it needs to be 100%.
Mary
I am using Moodle 2.5 and don't exactly have an option to upgrade in the near future >_<
I'll try to figure it out as I have some web dev experience. Too bad I can't just patch and fix...
Odd. For some reason it looks like the @media queries are not being applied. Chrome 32 has a wonderful new device emulation tool - see: https://developers.google.com/chrome-developer-tools/docs/mobile-emulation - so you could use that to debug.
Hi Gareth,
I have just been looking in bootstrapbase/less/moodle/responcive.less and found this...
// We need to specify a more specific selector to reset the width for
// cases when we have content in the side-pre blockregion but not in the
// side-post blockregion as there are more specific selectors in
// core.less which take precedence which break responsiveness.
.empty-region-side-post.used-region-side-pre {
#block-region-side-pre.span4,
#region-main.span8.span8 {
.fluid-span(12);
}
}
Where are there two span8 classes together?
This can't be right...surely?
Ok, here's the commit: https://github.com/moodle/moodle/commit/338021b90cce378a2823dde442475e75eadfa7fc - relates to MDL-40722 by David Scotson. He should know what he's doing. Looks like a typo: https://tracker.moodle.org/browse/MDL-40722?focusedCommentId=252082&page=com.atlassian.jira.plugin.system.issuetabpanels:comment-tabpanel#comment-252082. I'm working on MDL-44074 which is in that exact area, so can fix the typo.
Thinking about it as I think you are already saying, will fix this issue.
Nothing weird, just HQ doing some fixing. 
Gareth that's not David's work...!
in case you're interested, i seem to have patched up the problem by setting the appropriate blocks to 100% inside of a media query
@media (max-width:768px) {
.empty-region-side-post.used-region-side-pre #block-region-side-pre.span4 {width:100%;}
.empty-region-side-post.used-region-side-pre #region-main.span8 {width:100%;}
}
seems to have done the trick anyway... feels like a band-aid though
Thanks Dustin,
Seems to fall in line with a pending issue I have https://github.com/gjb2048/moodle/compare/moodle:master...wip-MDL-44074-master#diff-107420693478a76e1b5076693b56f776L443.
Cheers,
Gareth
oh no problem.. i just applied this little band-aid fix to my own template since my file/directory permissions are somewhat limited at my workplace. i'm sure there is a much more elegant way to address the issue