Simple Size Change in CSS Document for Comment Box - html

Question

I would like to change the size of this facebook style comment box. I don't have any experience or knowledge of CSS and I couldn't figure out which CSS block to modify. Thanks in advance. I have included the CSS file and the file that utilizes the CSS specs. Thanks again.
.emAddComment{
background-color: #ECEFF5;
border-bottom: 1px solid #E5EAF1;
clear: left;
float: none;
margin-bottom: 2px;
overflow: hidden;
padding: 5px 15px 4px 5px;
display: block;
font-size: 11px;
color: #333;
font-family: "lucida grande",tahoma,verdana,arial,sans-serif;
text-align: left;
}
input.emButton{
padding: 2px 4px 3px;
color: #FFF;
background-color: transparent;
border: medium none;
cursor: pointer;
display: block;
font-weight: bold;
font-size: 11px;
margin: 0;
overflow: visible;
width: auto;
}
span.emButton{
background-color: #5B74A8;
border-color: #29447E #29447E #1A356E;
border-width: 1px;
border-style: solid;
display: inline-block;
outline: medium none;
vertical-align: bottom;
}
.emAddComment textarea{
width: 50%;
height: 29px;
overflow: hidden;
margin: 0 10px 5px 0;
min-height: 29px;
border: 1px solid #BDC7D8;
font-family: "lucida grande",tahoma,verdana,arial,sans-serif;
font-size: 11px;
padding: 3px;
}
.emAddComment .addEmMail, .emAddComment .addEmName{
margin: 0 10px 5px 0;
border: 1px solid #BDC7D8;
font-family: "lucida grande",tahoma,verdana,arial,sans-serif;
font-size: 11px;
padding: 3px;
width: 200px;
}
.emAddComment label{
width: 75px;
text-align: right;
}
.emComment{
background-color: #ECEFF5;
border-bottom: 1px solid #E5EAF1;
clear: left;
float: none;
margin-bottom: 2px;
overflow: hidden;
padding: 5px 0 4px 5px;
display: block;
color: #333;
}
.emInfoMessage{
background-color: #FFEFF5;
border-bottom: 1px solid #E5EAF1;
clear: left;
float: none;
margin-bottom: 2px;
overflow: hidden;
padding: 5px 0 4px 5px;
display: block;
color: #333;
text-align: center;
font-weight: bold;
}
.emComment .emCommentImage{
float: left;
}
.emComment .emCommentText{
padding-right: 7px;
margin-left: 40px;
}
.emComment .emCommentInto{
color: #777;
padding: 7px 7px 1px;
text-align: right;
}
.emShowAllComments, .emHideAllComments{
border-bottom: 1px solid #E5EAF1;
clear: left;
float: none;
margin-bottom: 2px;
overflow: hidden;
padding: 5px 0 4px 5px;
display: block;
color: #333;
background: #ECEFF5 url('images/comments.png') no-repeat 5px 4px;
padding-left: 26px;
}
#emContent, .emContent{
font-family: "lucida grande",tahoma,verdana,arial,sans-serif;
font-size: 11px;
}
#emContent a, .emContent a{
text-decoration: none;
color: #3B5998;
}
#emContent a:hover, .emContent a:hover{
text-decoration: underline;
}
.emSenderName{
font-weight: bold;
}
.emAddComment .addEmPot{
display: none;
}
.emCommentLike{
margin-top: 5px;
color: #777;
}
<?php
require_once('commentanything/config.inc.php');
require_once('commentanything/funcs.inc.php');
## check if there is a moderation action ###
#
$actionType = null;
$actionComleted = false;
if($_GET['emAct'] and $_GET['emCommentKey'] and $_GET['emCommentID'] and $_GET['emCommentOID']){
//check if the comment exists and I have access
if($comment = $db->query("SELECT * FROM em_comments WHERE id = ".(int)$_GET['emCommentID']." AND object_id = ".(int)$_GET['emCommentOID']." AND access_key = ".$db->quote($_GET['emCommentKey']))->fetch()){
switch($_GET['emAct']){
case 'delete': {
$actionCompleted = true;
$actionType = 'delete';
$db->query("DELETE FROM em_comments WHERE id = ".(int)$_GET['emCommentID']." AND object_id = ".(int)$_GET['emCommentOID']." AND access_key = ".$db->quote($_GET['emCommentKey']));
break;
}
case 'allow': {
$actionCompleted = true;
$actionType = 'allow';
$db->query("UPDATE em_comments SET visible = '1' WHERE id = ".(int)$_GET['emCommentID']." AND object_id = ".(int)$_GET['emCommentOID']." AND access_key = ".$db->quote($_GET['emCommentKey']));
break;
}
}
}
}
#
## end check ###############################
//get comments from database
$myip = ip2long($_SERVER['REMOTE_ADDR']);
$comments = $db->query("SELECT DISTINCT
em_comments.*,
em_likes.vote
FROM em_comments
LEFT JOIN em_likes ON em_comments.id = em_likes.comment_id AND em_likes.sender_ip = ".$myip."
WHERE
object_id = ".$db->quote($object_id)." AND
visible = '1'
ORDER BY id")->fetchAll();
// -- form output ------------------------------------------------
$total = count($comments);
$counter = 1;
$html = '<div id="emContent_'.$object_id.'" class="emContent">';
if($actionCompleted){
$html .= '<div class="emInfoMessage">';
$html .= $lang['cid'].' '.(int)$_GET['emCommentID'].' '.$lang['wassuc'].' '.($actionType=='delete'?$lang['deleted']:$lang['moderated']).'!';
$html .= '</div>';
}
if($total > $CCOUNT){
$html .= '<div class="emShowAllComments" id="emShowAllComments_'.$object_id.'">
'.$lang['view'].' <span id="total_em_comments_'.$object_id.'">'.$total.'</span> '.$lang['view2'].' <noscript><em>This page needs JavaScript to display all comments</em></noscript>
</div>
<div class="emHideAllComments" id="emHideAllComments_'.$object_id.'" style="display: none;">
'.$lang['hide'].' <span id="total_em_comments_to_hide_'.$object_id.'">'.$total.'</span> '.$lang['view2'].'
</div>';
}
foreach($comments as $comment){
if($comment['sender_name']){
if($comment['sender_mail']){
$comment['sender_name'] = jsEncode($comment['sender_mail'], $comment['sender_name']);
}
$sender = '<span class="emSenderName">'.$comment['sender_name'].'</span>: ';
}else{
$sender = '';
}
if($comment['vote']){
$likeText = commentLikeText($comment['rating_cache']-1);
}else{
$likeText = ''.$lang['ilike'].'';
if($comment['rating_cache']){
$likeText .= ' — '.commentLikeText($comment['rating_cache'],false);
}
}
$html .= '<div class="emComment emComment_'.$object_id.' '.($counter < ($total - ($CCOUNT - 1))?'emHiddenComment emHiddenComment_'.$object_id:'').'" id="comment_'.$comment['id'].'" '.($counter < ($total - ($CCOUNT - 1))?'style="display:none"':'').'>
<div class="emCommentImage">
<img src="http://www.gravatar.com/avatar/'.gravatar($comment['sender_mail'], false).'" width="32" height="32" alt="Gravatar" />
</div>
<div class="emCommentText">
'.$sender.stripslashes($comment['comment_text']).'
</div>
<div class="emCommentInto">
'.strftime($DATEFORMAT,strtotime($comment['created'])).'
<div class="emCommentLike" style="'.($ALLOWLIKE?'':'display:none;').'">
<span id="iLikeThis_'.$comment['id'].'">
<em>'.$likeText.'</em>
</span>
</div>
</div>
</div>';
$counter++;
}
$html .= '</div>';
$html .= '<div id="emAddComment_'.$object_id.'" class="emAddComment">
<form method="post" action="commentanything/php/addComment.php" onsubmit="return false;">
<span '.($SHOWNAME?'':'style="display: none;"').' id="emNameSpan_'.$object_id.'" class="emNameSpan">
<label for="addEmName_'.$object_id.'">'.$lang['name'].':</label>
<input type="text" placeholder="'.$lang['enterName'].'" id="addEmName_'.$object_id.'" class="addEmName" name="sender_name" />
</span>
<span '.($SHOWMAIL?'':'style="display: none;"').' id="emMailSpan_'.$object_id.'">
<label for="addEmMail_'.$object_id.'">'.$lang['mail'].':</label>
<input type="text" placeholder="'.$lang['enterMail'].'" id="addEmMail_'.$object_id.'" class="addEmMail" name="sender_mail" />
</span>
<textarea placeholder="'.$lang['enterComment'].'" id="addEmComment_'.$object_id.'" class="addEmComment" name="comment"></textarea>
<input type="text" name="email" value="" id="addEmPot_'.$object_id.'" class="addEmPot" />
<input type="hidden" name="object_id" value="'.$object_id.'" />
<span class="emButton">
<input type="submit" class="emButton" id="emAddButton_'.$object_id.'" value="'.$lang['comment'].'" onclick="addEMComment(\''.$object_id.'\')" />
</span>
</form>
</div>';
//send reply to client
echo '<div id="'.$object_id.'" class="emComments" object="'.$object_id.'" class="ignorejsloader">'.$html.'</div>';

Answer 1

Trial/error is a way of learning. Try updating the width on the code below for instance:
.emAddComment textarea{
width: 50%;
height: 29px;
overflow: hidden;
margin: 0 10px 5px 0;
min-height: 29px;
border: 1px solid #BDC7D8;
font-family: "lucida grande",tahoma,verdana,arial,sans-serif;
font-size: 11px;
padding: 3px;
}