1) All of the products in category 5 are showing instead of just 4.
{{block type="catalog/product_list" category_id="5" product_limit="4" template="catalog/product/random.phtml"}}
This is wrong. You're using the wrong block, catalog/product_list, you should be using catalog/product_list_random and the wrong arg product_limit, you should be using num_products. It's not exactly obvious, I don't know if I used google or checked Block/Product/List/Random.php and worked out what
$numProducts = $this->getNumProducts() ? $this->getNumProducts() : 0;
$collection->setPage(1, $numProducts);
was doing.
2) Though HTML and CSS appear to be identical on both pages, formatting is messed up as compared to the products in grid format as they look on a category page.
On the default product list page, the div hierarchy is
<div class="col-main">
<div class="category-products">
On the homepage, when you include that block, the div hierarchy is
<div class="col-main">
<div class="std">
<div class="category-products">
.std has some rules that .category-products isn't expecting to override. For instance, if you changed from using the grid to the list layout, you'd be using an ordered list, and all the products would start displaying their list item number because this css
std.ol { list-style: decimal outside; margin-bottom: 1.5em; }
if overriding the default css of list-style:none which product-list is relying on.
Best Answer
You can make the change by editing the following file:
app/design/frontend/theme/default/template/catalog/product/list.phtml.The
list.phtmlfile contains the code which manages the display for both list & grid view.You should see something along these lines, separating the two views:
Simply make the design changes using HTML and you'll be all sorted.