As I am developing an application for iPads I have not much space in the UI.
Therefore I like to reduce the height of the REGION HEADER - let's say to half of the standard height.
In the source code and template I can see a <h2> tag surrounding the name of the region within the header, which will control the height of the name within the region header.... (i thought)...
my idea: change this to <h4> in the template ... that will the reduce the height atleaset to some extent;
<div class="t-Region #REGION_CSS_CLASSES#" id="#REGION_STATIC_ID#" #REGION_ATTRIBUTES#>
<div class="t-Region-header">
<div class="t-Region-headerItems t-Region-headerItems--title">
<span class="t-Region-headerIcon"><span class="t-Icon #ICON_CSS_CLASSES#" aria-hidden="true"></span></span>
<h4 class="t-Region-title" id="#REGION_STATIC_ID#_heading">#TITLE#</h4>
</div>
<div class="t-Region-headerItems t-Region-headerItems--buttons">#COPY##EDIT#<span class="js-maximizeButtonContainer"></span></div>
</div>
<div class="t-Region-bodyWrap">
<div class="t-Region-buttons t-Region-buttons--top">
<div class="t-Region-buttons-left">#PREVIOUS#</div>
<div class="t-Region-buttons-right">#NEXT#</div>
</div>
<div class="t-Region-body">
#BODY#
#SUB_REGIONS#
</div>
<div class="t-Region-buttons t-Region-buttons--bottom">
<div class="t-Region-buttons-left">#CLOSE##HELP#</div>
<div class="t-Region-buttons-right">#DELETE##CHANGE##CREATE#</div>
</div>
</div>
</div>
but that had no affect ...
pls kindly advise
thanks