Grid Display

Hello,  so i have a grid layout for a attack line but i can not get the heights of the text boxes to change. can someone tell me what im doing wrong? I would like to resize the text boxes to be the same height as the selection boxes.  I tryed adding (height: 15px;) but that did not change the height of the text boxes.  ill post the css and the HTML below along with a picture of what im getting.  HTML <div class="attacks"> <h4>&nbsp </h4> <h4>Weapon</h4> <h4>Stat</h4> <h4>Bonus</h4> <h4>P</h4> <h4>Total</h4> <h4>Ammo</h4> <h4>Save</h4> <h4>DC</h4> <button class="button2" type="roll"></button> <input  type="text"  name="attr_weapon_name"  class="weapon_name"  value="0"> <select type="text" name="attr_attack_stat" class="attack_stat" > <option value="@{str_mod}">STR</option> <option value="@{dex_mod}">DEX</option> </select> <input  type="text"  name="attr_weapon_bonus" class="weapon_bonus"  value="0"> <input  type="checkbox" name="attr_weapon_prof_bonus"         value="@{proficiency}"> <input  type="text"   name="attr_attack_total" class="attack_total"  value="[[@{attack_stat}+@{weapon_bonus}+@{weapon_prof_bonus}]]" disabled="true"/> <select name="attr_ammodice" class="ammo_dice" > <option>1d1</option> <option>1d4</option> <option>1d6</option> <option>1d8</option> <option>1d10</option> <option>1d12</option> <option>1d20</option> <option>2d20</option> <option>3d20</option> </select> <select name="attr_saveDC" class="saveDC"> <option value="0">---</option> <option value="8+@{prof}+@{str_mod}">STR</option> <option value="8+@{prof}+@{dex_mod}">DEX</option> <option value="8+@{prof}+@{con_mod}">CON</option> <option value="8+@{prof}+@{int_mod}">INT</option> <option value="8+@{prof}+@{wis_mod}">WIS</option> <option value="8+@{prof}+@{cha_mod}">CHA</option> </select> <input  type="number"   name="attr_saveDCNumber"  class="DC"  value="@{saveDC}" disabled="true"/> </div> CSS .sheet{   border: 3PX solid purple;      } .ui-dialog .charsheet button[type=roll]:before  {     content: ""; } .background{   width:90px; } .class{   width:65px; } .level{   width:30px; } .armortype{ width:155px; } .ShieldType{ width:110px; } .weapon_name{ width:100px; text-align:center; } .attack_stat{ width:57px } .weapon_bonus{ width:45px; text-align:center; } .attack_total{ width:40px; text-align:center; } .ammo_dice{ width:60px; } .saveDC{ width:59px; text-align:center; } .DC{ width:30px; text-align:center; } div.Section1 {    display: grid;    grid-template-areas: "stats deathsaves"                         "stats languages"                         "stats speed"; border: 3px solid red; grid-template-columns: 400px 400px; text-align:center; } div.stats {    grid-area: stats;    display: grid;    grid-template-columns: 100px 40px 40px 100px 20px 40px 40px;    column-gap: 2px;    text-align:center; } div.deathsaves {    grid-area: deathsaves;    grid-template-columns: 70px 20px 20px 20px 70px 20px 20px 20px 70px;    text-align:center;     } div.languages {    grid-area: languages;    display: grid;    grid-template-columns: 60px 20px 60px 20px 90px 20px;    column-gap: 10px;    text-align:center; } div.speed { grid-area: speed; text-align:center;    } div.skills{ display: grid;     grid-template-columns: 110px 20px 20px 50px 50px 110px 20px 20px 50px 50px 110px 20px 20px 50px 50px;     column-gap: 1px;     text-align:center;     border: 3px solid blue; text-align:center; } div.tools{ display: grid;     grid-template-columns: 110px 20px 20px 50px 50px 110px 20px 20px 50px 50px 110px 20px 20px 50px 50px;     column-gap: 1px;     text-align:center;     border: 3px solid green; text-align:center; } div.attacks{ display: grid;     grid-template-columns: 40px 100px 57px 45px 20px 40px 63px 59px 30px;     column-gap: .5px;     text-align:center;     border: 3px solid yellow; } .button2{ height: 10px; }

Try this; .charsheet .attacks input[type="text"] { height: 15px; } By adding a little more class/hierarchy to your styles, you can increase the specificity so that it overrides the base css that roll20 assigns. You could add a class to all of the text inputs as well (ie class='text-field' ) and then include that class in the example above to add even more specificity. example; .charsheet .attacks input[type="text"].text-field {height: 15px} You also might have to adjust padding when you set the height. Not sure. Experiment. Also, select s do not have a "type" attribute, so you can/should remove " type='text' ". Hope this helps. Cheers

To add to what Vince said, it's safe to add this to the start of any or all of your CSS blocks. .ui-dialog .charsheet All inputs on roll20 have some built in styling and need some extra specificity to override that styling. It does no harm to add more specificity than you need, but if desired, you can add stuff bit by bit to find exactly what you need. Selects and inputs have different styling and are always a pain to line up. For example, selects have a bottom margin you might want to get rid of.

Well that worked thank you guys you both are awsome.