Trying to Resize Browse Grid for Mobile phone

[rjolda]

Hi All,
I have edited custom.css to make the font on my mobile phone screen so that it is x-small.
I have managed to edit a lot of the text in the browse grid to x-small text with the following css in custom.css.
@media screen and (max-width: 640px){
        .nt-body-div{font-size: x-small}
   .nt-child-grid{font-size: x-small}
}

However, what I really want to do is make the whole grid presentation SMALLER
THe following is the Class that I want to make SMALLER in its entirety.
What are the CSS settings to make the whole Browse Grid ( class=" nt-child-grid" ) shrink to  only 50% of its
size?
Thanks,
Ron

This is the element:
<div class=" ">
<div id="sm_browsec_auto_small_screen-parent-container" class=" nt-child-grid" data-elem="child-table">
<div class=" nt-child-grid-cell" data-elem="child-cell" valign="top">
<div id="sm_browsec_auto_small_screen_div" class="nt-browse exists">
<div id="sm_browsec_auto_small_screen_header_div" class=" nt-header nt-browse-header"> See Autos</div>
<div id="sm_browsec_auto_small_screen_locator_b_div" style="display: none;"><table class=" nt-locator" data-loc="table">
<tbody><tr class=" nt-flex nt-locator-row" data-loc="row">
<td data-loc="prompt">
<div class="nt-locator-prompt"> :</div></td>
<td data-loc="input">
<div><input type="search" name="locator1sm_browsec_auto_small_screen" id="locator1sm_browsec_auto_small_screen" value="" class=" nt-locator ui-widget nt-entry ui-corner-all" data-do="lo" data-imm="true" size="20" placeholder="Search"></div></td>
<td data-loc="buttons">
<div id="sm_browsec_auto_small_screen_locate_b" class=" nt-flex nt-locator-button-set"><button type="button" name="" id="dLqg" value="Search" class="nt-flex nt-button nt-button-with-icon nt-locate-button ui-button ui-corner-all ui-widget" title="Click here to start the Search"><span class=" ui-icon ui-button-icon ui-icon-lightbulb"></span><span class="ui-button-icon-space"></span>Search</button>
</div></td>
</tr>
</tbody></table>
</div>
<div id="sm_browsec_auto_small_screen_table_resize_div" class="nt-" style="width: 500px; height: 500px;"><div id="sm_browsec_auto_small_screen_table_div" class=" ui-widget">
<table id="sm_browsec_auto_small_screen_tbl" class=" nt-browse nt-browse-table nt-browse nt-browse-table" data-elem="browse-table" style="opacity: 1;">
<thead class=" nt-browse-head nt-browse-table-header">
<tr id="sm_browsec_auto_small_screen_head" class="nt-browse-row nt-browse-table-row nt-browse-row-header sm_browsec_auto_small_screen-row-header ui-sortable" data-elem="browse-header-row">
<th data-col="1" id="head_66" class=" nt-browse-table-cell nt-browse-header-all-table nt-browse-header-not-selected ui-corner-top nt-browse-header-cant-select" data-elem="browse-header-cell" data-colname="Other66ServiceRequest">
<div class="nt-flex nt-browse-table-cell"><div class="nt-browse-header-text-cell">Service Request</div></div></th><!-- endCell [1] headerCell -->
 

[rjolda]

Solved.  I hired a young kid to go over the css with me. 
in my custom.css:

@media screen and (max-width: 640px){
   .ui-dialog{max-width:100%}
   .ui-dialog-content{max-width:100%}
   .nt-body-div{font-size: x-small}
   .nt-contentpanel{font-size: x-small}
   .nt-child-grid{font-size: x-small}
   .nt-child-grid{
      display: grid;
    grid-template: 1fr;     <<<<<<<<<-------------  this one line did the trick!!!

Ron