Optimize @media breakpoints
Actually there are many media breakpoints and separated in several CSS files like adaptable, extras, menus and slider.
Optimize the code and move it to only one file.
Comments (6)
-
-
reporter We are still thinking what will be the breakpoints but probably the lowest will be not less 768px. Lower resolution are not used actually and has no sense to put time and effort in a layout that will not be used.
The default BS2 (used by moodle and Adaptable) breakpoints are: 768, 980 and 1200px so probably those will be used.
-
Generally I do confirm. What i meant with point 2) was a strange layout for mobile device resolution.
Additionaly I figured out that the problem with marketblocks-width occurs, when you delete the content of infoblock: In html-mode (atto-editor), delete all content, remain in html-mode and safe changes. Then the marketblock area on not-logged-in FrontPage becomes a strange width (see screenshot). The div#theinfo is missing.
Do open the setting-page for marketing block again. Don't change anything (atto automatically fills empty textarea with blanc paragraphs) and safe again. Now all is fine at the frontpage (notloggedin) and we have an div#theinfo
-
Addition to my first comment: header menus at 768px < resolution <1068px; using M3.2, Adaptable 1.3
Found non-BS2 breakpoint width min-width:1068... Missing 'normal' breakpoints, like for medium devices (>992) or tablets (>768)... This causes the header menu headings to be displayed, but not the dropdown menu on :hover or :active.
Following some CSS found for >1068px, that i didn't expected to find:
@media only screen and (min-width:1068px) { .dropdown:hover > .dropdown-menu { display: block; } .dropdown-menu li:hover .sub-menu, .newmenus:hover .dropdown-menu { visibility: visible; } .newmenus .dropdown-menu { left: 0%; position: absolute; visibility: hidden; margin-top: 0; } } @media all and (max-width:768px) { .newmenu1, .newmenu2, .newmenu3, .newmenu4, .newmenu5, .newmenu6, .newmenu7, .newmenu8, .newmenu9, .newmenu10, .newmenu11, .newmenu12, .newmenu13, .newmenu14, .newmenu15, .newmenu16, #page-footer, .breadcrumb, .customalert, .socialbox, #page-header, #coursetitle, #titlecontainer { display: none; } }
-
reporter The main problem is that media have very similar values for the same breakpoint: 979, 980, 990 or 767, 768 .. and even 1068 which is totally out of place. This is the main reason of the screen behaviour wne you use these resolutions.
We want to unify these breakpoints in the above indicated: 768, 990 and 1024. This task will fix many issues with mobile devices but will take some time.
-
reporter - changed status to closed
Fixed in c3f04f5
- Log in to comment
"...Optimize the Code..."
Hopefully this includes some new issues with Adaptable 1.3 + Moodle 3.2. For example: