CSS: Decrease template component height

Since I’m not a developer, I’m struggling with some CSS…perhaps someone could lend a hand?

How do I decrease the height of the template component of some statistic boxes I would like to include at the top of a contact detail page. It’s currently taking up a lot of screen space, and I would like to cut it down (see below):

This is my current template HTML:



And here is the box CSS:

.box{ padding: 8px;
_ background-color: LightGrey; _
_ border-width: 2px;_
_ border-color: Navy;_
_ height: 75px;_
_ margin: 4px;_
_ position: relative;_

I tried decreasing the height in the box class, but just ended up with this:

Also, why is the padding larger on the blue Age box compared with the grey box? They are using the same template HTML and CSS Class…

Thanks in advance!

You were on the right track!  You just went too far.  Play with your height until you get what you are after. 

The blue box is different because its code is different.  Somewhere it is different.  An extra div, some difference in the css.  Somthing…

You might also use a Rich Text Component so that you don’t have to do this in Code.   The tutorial we wrote originally (that had this code in it) has now been revamped so it uses the RTC instead of Divs in a Template with extra CSS code.   See here: http://help.skuidify.com/m/supercharge-your-ui/l/153540-highlighting-critical-data-using-wrappers-ri…  

(special bonus if you spot the reference to an early lunch.  Anna writes such good tutorials that I laugh out loud…) 

Definitely check out the RTC. But, if you need something quick, try this:


&#46;box {    <br />```    padding: 8px;<br />    background-color: #C6E1FF;<br />    border-color: #C6E1FF;<br />    /* background-color: #d3eaf2;<br />    border-color: #d3eaf2;*/<br />    border-width: 2px;<br />    height: 50px;<br />    margin: 4px;<br />    position: relative;<br />}<br />&#46;nx-pagetitle-maintitle-2 {<br />    font-size: 12pt;<br />    font-weight: 700;<br />    padding: 0 6px 4px 0;<br />    float: left;<br />    clear: left;<br />}



If I didn’t know better I’d say Irvin was trolling here… 

Well, not really.  I was feeling bad about not being able to contribute to the community and finally took a few minutes to “troll”.  Ok, caught me!