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.
info@elgg.org
Security issues should be reported to security@elgg.org!
©2014 the Elgg Foundation
Elgg is a registered trademark of Thematic Networks.
Cover image by RaĆ¼l Utrera is used under Creative Commons license.
Icons by Flaticon and FontAwesome.
- Rohit Gupta@Rohit_1990_3676
Rohit Gupta - 0 likes
- viewport meta is responsible for the responsiveness, detection of mobile browser etc.
- This can be found in https://github.com/Elgg/Elgg/blob/3.x/views/default/page/elements/head.php#L12
- meta property of viewport is stored in the $vars variable and the head.php file is responsible to extract the meta and create the <head></head> code block in elgg.
- 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
You must log in to post replies.