How to control the "responsive" behavior in theme in Elgg 3x ?

How to control the "responsive" behavior in theme in Elgg 3x ?

I went through the docs on learn.elgg.org but it seems I cannot find
- what code ( and in which folder/file) deals with the responsiveness, detection of mobile browser etc
- at what point / what code makes the horizontal tabs ( All | Mine | Friends) into a series of vertical tabs or stack that takes up the entire mobile screen pushing actual contents out of view

Many thanks for any help.

  • - what code ( and in which folder/file) deals with the responsiveness, detection of mobile browser etc

    - at what point / what code makes the horizontal tabs ( All | Mine | Friends) into a series of vertical tabs or stack that takes up the entire mobile screen pushing actual contents out of view

    • As soon as your screen size reduces from 800 px then the css converts the horizontal tabs to vertical tabs.
    • Any if you want to know the css responsible for this then its ".elgg-menu-filter, .elgg-tabs" and "@media screen and (min-width: 50rem) .elgg-menu-filter, .elgg-tabs"
    • for @media screen and (min-width: 50rem) the style "flex-direction: row;" is responsible for horizontal tabs where as for ".elgg-menu-filter, .elgg-tabs" the style "flex-direction: column;" is responsible for vertical tabs